Angular 1.5 Component：傳遞一個函數

Question

是否可以將函數傳遞給組件並在傳遞參數的組件內調用此函數？

例：

帖子列表

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

getPostUrl是一個函數（ 在容器控制器內 ）：

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)}}"我想調用傳遞參數的函數，這個函數返回一個字符串 。

在post組件 （不是PostList）中，postUrl是一個字符串屬性@ 。

但是......不工作！

angular.js：13550錯誤：[$ interpolate：interr]無法插值：{{$ ctrl.getPostUrl（post.creationDate）}} TypeError：無法使用'in'運算符在1459329888892中搜索'blog' 錯誤鏈接

有可能嗎？ 如何？

非常感謝！

Answer 1

您可以將函數傳遞給組件，但必須將函數參數定義為對象，並將正確的參數名稱作為其鍵。 例：

<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>

Answer 2

如果要從組件內部調用該函數並讓它返回一個值，那么您需要雙向綁定：

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

但是，這可能不是一個好主意。 考慮將數據傳遞給組件，而不是從外部發出組件請求數據。 這將使更好的隔離組件。

Answer 3

要將值返回到綁定函數，必須將其作為對象文字傳遞。
self.selected（{id：'42'，名字：'道格拉斯'，姓：'亞當斯'}）;

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);    
}

Answer 4

根據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
}