將數據從一個角度組件傳遞到另一個角度組件

Question

是的，這已問了幾次 - 隨意合併問題 - 但我可能是一個拉默。我在頁面中有兩個組件，如下所示：

<post-list></post-list> 
<post-detail><post-detail> 

這是一個非常簡單的主細節頁面。當用戶單擊post-list列表中的某個項目時，post-detail將加載所選帖子並顯示它。

問題是如何獲得從post-list到post-detail的值以使其立即作出反應？我認爲在post-detail等待更改應該有一個Observable。我也假設它應該觀看輸入屬性。問題是：我可以從post-list獲得一個值並將其作爲輸入屬性發送到post-detail？可以（也應該）通過父組件傳遞它，還是應該爲此定義一個服務？

Answer 1

一種方法是從@Input和@Output裝飾器。你的父組件應該處理傳入和傳出子組件的內容。

<post-list 
    (itemSelected)="loadDetails(any)"> 
</post-list> 
<post-detail 
    [selectedItem]="any"> 
<post-detail> 

itemSelected - >是一個輸出，其是從列表組件到父組件被選擇最新發射的EventEmitter。

loadDetails（any） - >這是父組件中的一個方法，它處理由list組件發出的whats，做什麼，你從孩子得到什麼。

selectedItem - >是詳細組件中的輸入屬性，它可以是任何類型的應用，理想情況下應該從loadDetails接收結構。

這只是一個簡單的模板，可以滿足您的要求。 但是也可以寫一個服務來處理這個問題。

Answer 2

由於您的兩個組件都有一個共同的父項，最簡單的方法是使用@Input（）和@Output（）屬性，並讓父項扮演中介角色。我在此錄製了一段簡短的視頻：https://www.youtube.com/watch?v=tSXx4NoKEYY

您還可以使用Router和Observable實現主 - 細節。有關於此的博客：https://yakovfain.com/2016/11/20/angular-2-implementing-master-detail-using-router/

Answer 3

您可以按照：

1-注入$ rootScope到這兩個部件的

2-實現下面的代碼，其中一個作爲數據接收器：

$rootScope.$on('transferDataEvent', function(data) { 

    }); 

3-撥打以下代碼作爲數據發送者

$rootScope.$emit('transferDataEvent', data); // send data 

上 $使聽者和 $發出通過作用域層級向上調度事件

Answer 4

的問題是我怎麼從列表後的值到後期的細節，使其立即作出反應？我假設應該有一個Observable在後期細節等待變化。我也假設它應該觀看輸入屬性。問題是：我可以從列表中獲取值並將其作爲輸入屬性發送給後期詳細信息？可以（也應該）通過父組件傳遞它，還是應該爲此定義一個服務？

這種情況非常簡單 - 後期列表需要指示何時選擇某個項目，並將該「selectedItem」信息傳遞給後期細節以供顯示。

如果我正在處理這種情況，我會使用簡單的輸入和輸出（即屬性和事件綁定）在組件之間傳遞信息，使用父組件作爲通信的中介。您正在通過父組件進行路由 - 具體來說，後期列表指示何時選擇帖子以及該帖子是什麼，而帖子詳細信息僅顯示傳遞給它的任何帖子。

因此，後列表需要一個名爲itemSelect的@Output EventEmitter屬性或其他適當的東西。此屬性的目的是通知任何關心何時選擇項目以及該項目是什麼的人。

PostListComponent：

export class PostDetailComponent { 
    ..... 
    @Output() postSelect = new EventEmitter(); 

    // whenever a post is selected, you call this.postSelect.emit(selectedPost) 
    // to notify others which post is selected 

在PostDetailComponent：

export class PostDetailComponent { 
    ..... 
    // this is your property binding 
    // used to get data in real time in to the component for display 
    @Input() post; 

最後，父組件需要交物業接收來自列表發佈更新，並通過這些更新後期細節。

爲父級

的爲父級只是監聽來自PostList更新，並接收他們，分配事件（在模板中的$事件值），其內部崗位性質，實質這又被推送到PostDetail。

@Component({ 
    ....... 
    template: ` 
     <post-list (postSelect)="post = $event"> </post-list> 
     <post-detail [post]="post"> </post-detail> 
    ` 
}) 
export class ParentComponent { 
    post: any; // brokers the communication between the two child components 
    ....... 

這就是我的情況。

您可以使用服務來代理通信，但通常只有當通信方式複雜或兩個組件在視圖層次結構中彼此不接近時才需要，因此很難從一個組件到另一個。但在你的情況下，服務可能是矯枉過正的。

See the docs for more info.

Answer 5

一種更簡單的方法，您的問題是使用模板引用變量：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars

我建議，因爲你的組件是兄弟姐妹，即。共享同一個家長。

您可以在模板中引用post-list成分是這樣的：

看看這個plnkr我設置：https://plnkr.co/edit/C7kjlaZItfn0sE12HNMO?p=preview

這裏是代碼：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <post-list #postList></post-list> 
     <post-detail [text]="postList?.chosen?.detail"></post-detail> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 


@Component({ 
    selector: 'post-detail', 
    template: ` 
    <div> 
     <h2>{{text}}</h2> 
    </div> 
    `, 
}) 
export class PostDetail { 
    @Input() text: string; 
    constructor() { 
    } 
} 


@Component({ 
    selector: 'post-list', 
    template: ` 
    <div> 
     <ul> 
     <li *ngFor="let post of posts; let i = index"> 
     <button (click)="chosen = posts[i]">{{post.title}}</button> 
     </li> 
     </ul> 
    </div> 
    `, 
}) 
export class PostList { 
    chosen: any; 
    posts: [] = 
    [ 
    { title:"post 1", detail:"post one detail" }, 
    { title:"post 2", detail:"post two detail" }, 
    { title:"post 3", detail:"post three detail" }, 
    ] 
    constructor() { 
    } 
}