Angular 1.5 Component: Übergeben einer Funktion

Question

Ist es möglich, eine Funktion an eine Komponente zu übergeben und diese Funktion in der Komponente aufzurufen, die einen Parameter übergibt?

Beispiel:

Liste der Beiträge

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

getPostUrl ist eine Funktion (innerhalb des Behälters 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; 
}; 

Liste der Beiträge: Komponente

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

In dieser Zeile:

post-url="{{$ctrl.getPostUrl(post.creationDate)}}" Ich möchte die Funktion aufzurufen, einen Parameter übergeben und diese Funktion eine Zeichenfolge zurückkehrt.

In Pfostenkomponente (nicht PostList) die PostURL ein Zeichenfolgenattribut @ ist.

Aber ... funktioniert nicht!

angular.js:13550 Error: [$interpolate:interr] Can't interpolate: {{$ctrl.getPostUrl(post.creationDate)}} TypeError: Cannot use 'in' operator to search for 'blog' in 1459329888892 Error Link

Ist es möglich, es zu tun? Und wie?

Vielen Dank!

Answer 1

Wenn Sie die Funktion aus dem Inneren einer Komponente anrufen möchten, und haben sie einen Wert zurückgeben, dann müssen Sie Zweiweg-Bindung:

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

Dies ist jedoch wahrscheinlich nicht sehr gute Idee. Ziehen Sie in Betracht, um Daten an die Komponente weiterzuleiten, anstatt Komponentenanforderungsdaten von außerhalb zu erstellen. Dies wird eine viel bessere isolierte Komponente ergeben.

Answer 2

Sie können Funktionen an Komponenten übergeben, aber Sie müssen die Funktionsargumente als Objekt mit den richtigen Argumentnamen als Schlüssel definieren. Beispiel:

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