web-dev-qa-db-ja.com

Angular 1.5コンポーネント：関数を渡す

関数をコンポーネントに渡し、コンポーネント内でこの関数を呼び出してパラメーターを渡すことはできますか？

例：

投稿のリスト

_<post-list posts="blog.posts"
           loading="blog.loadingPosts"
           get-post-url="blog.getPostUrl" 
           is-user-authenticate="blog.user">
</post-list>
_

getPostUrlは関数（inside the container controller）です：

_const getPostUrl = (postId) => {
    const protocol = $location.protocol();
    const Host = $location.Host();
    const port = $location.port();

    return protocol + "://" + Host + "" + (port !== 80 ? ":" + port : "") + "/blog/post/" + postId;
};
_

投稿のリスト：コンポーネント

_const PostList = {
  "bindings": {
    "posts": "<",
    "loading": "<",
    "getPostUrl": "&", //Function getPostUrl
    "isUserAuthenticate": "<"
  },
  "template": `<div>
                <div class="col-md-9 text-center" data-ng-if="$ctrl.loading">
                  <i class="fa fa-spinner fa-spin fa-2x"></i>
                </div>

                <div class="col-md-9 posts" data-ng-if="!$ctrl.loading">
                  <div data-ng-repeat="post in $ctrl.posts">
                    <post creation-date="{{post.creationDate}}"
                          content="{{post.content}}"
                          post-url="{{$ctrl.getPostUrl(post.creationDate)}}"
                          is-user-authenticate="$ctrl.user">
                    </post>
                  </div>
                </div>
              </div>`,
   "transclude": false
};

 angular
  .module("blog")
  .component("postList", PostList);
_

この行では：

post-url="{{$ctrl.getPostUrl(post.creationDate)}}"パラメータを渡して関数を呼び出したいのですが、この関数はstringを返します。

Inpostコンポーネント（PostListではない）postUrlは、文字列属性_@_です。

しかし...機能していません！

angular.js：13550エラー：[$ interpolate：interr]補間できません：{{$ ctrl.getPostUrl（post.creationDate）}} TypeError：「in」演算子を使用して1459329888892の「ブログ」を検索することはできません エラーリンク

それは可能ですか？そしてどのように？

ありがとうございました！

javascriptangularjscomponents
11
Aral Roca

コンポーネント内から関数を呼び出して値を返すようにするには、双方向バインディングが必要です。

"bindings": {
  "posts": "<",
  "loading": "<",
  "getPostUrl": "=", // <-- two-way binding
  "isUserAuthenticate": "<"
},

しかし、これはおそらくあまり良い考えではありません。外部からコンポーネントにデータを要求するのではなく、コンポーネントにデータを渡すを検討してください。これにより、分離されたコンポーネントが大幅に改善されます。

5
dfsq

関数をコンポーネントに渡すことはできますが、関数の引数を正しい引数名をキーとするオブジェクトとして定義する必要があります。例：

<post-list posts="blog.posts"
           loading="blog.loadingPosts"
           get-post-url="blog.getPostUrl(postId)" 
           is-user-authenticate="blog.user">
</post-list>

const PostList = {
 "bindings": {
  "posts": "<",
  "loading": "<",
  "getPostUrl": "&", //Function getPostUrl
  "isUserAuthenticate": "<"
 },
 "template": `<post creation-date="{{post.creationDate}}"
                      content="{{post.content}}"
                      post-url="{{$ctrl.getPostUrl({postId:post.creationDate})}}">
                </post>
21
Doron

値をバインディング関数に返すには、オブジェクトリテラルとして渡す必要があります。
self.selected（{id： '42'、firstname： 'Douglas'、lastname： 'Adams'}）;

angular.module('webapp').component('myComponent', {
    templateUrl: 'myComponent.html',

    bindings: {
        selected: '&'
    },
    controller: function () {
        var self = this;

        self.someEvent= function(){
            self.selected({id: '42', firstname: 'Douglas', lastname: 'Adams'});
        };
    }
});

その後、プロパティによってオブジェクトのリテラル値にアクセスできます。
id、firstname、lastname。
関数に追加のパラメーターを渡すこともできます。 （myVariable）

<div>
    <span ng-init="myVariable='Universe'">
    <my-component selected="myFunction(id, firstname, lastname, myVariable)"></my-component>
</div>


$scope.myFunction = function(id, firstname, lastname, myVariable){
    console.log(id, firstname, lastname, myVariable);    
}
0
RenRen

Todd Mottoの標準によると、親から子コンポーネントにメソッドを渡し、子でメソッドを呼び出すと親でトリガーされる「＆」を使用する代わりに「=」を使用することは推奨されません。例を見てみましょう。

親コンポーネントのテンプレート（HTML）：

<child take-me-to-school="$ctrl.searchBikeKeyAndStart>

子コンポーネントのコントローラー：

public someFunction = () => {
  this.takeMeToSchool();
}

子コンポーネントのコントローラーから関数が呼び出されると、親にマップされた関数がトリガーされます。

親コンポーネントのコントローラー（HTML）：

public searchBikeKeyAndStart = () => {
  .....
}

同じ関数に引数を渡したい場合

親コンポーネントのテンプレート（HTML）：

<child take-me-to-school="$ctrl.searchBikeKeyAndStart(**key**)>

子コンポーネントのコントローラー：

public someFunction = () => {
  this.takeMeToSchool({key: parameterValue});
}

子コンポーネントのコントローラーから関数が呼び出されると、親にマップされた関数がトリガーされます。

親コンポーネントのコントローラー（HTML）：

public searchBikeKeyAndStart = (**key**) => {
  console.log(**key**) //will print the param passed
}
0
Yogaraj Saravanan