這個Angular 2示例如何正確顯示如何使用父組件的子組件屬性？

Question

我是Angular 2的初學者，我對如何通過父組件訪問子組件屬性的教程示例有以下懷疑。

進入主成分（應用組分）我有此app.component.html視圖：

<div class="container"> 
     <app-server-element 
     *ngFor="let serverElement of serverElements" 
     [srvElement]="serverElement"> 
     </app-server-element> 
    </div> 
    </div> 
</div> 

它在serverElements陣列限定到應用迭代。 component.ts類，像這樣：

serverElements = [{type: 'server', name: 'TestServer', content: 'Just a Test'}]; 

，它是使用元素（此時只有1個，但這不重要）插入<app-server-element>組件中，該組件是<app-component>的子組件。

進入ServerElementComponent I類有：

@Component({ 
    selector: 'app-server-element', 
    templateUrl: './server-element.component.html', 
    styleUrls: ['./server-element.component.css'] 
}) 
export class ServerElementComponent implements OnInit { 

    @Input('srvElement') element: {type: string, name: string, content: string}; 

    constructor() { } 

    ngOnInit() { 
    } 
} 

所以，進入app.component.html觀點，我有：

<app-server-element 
    *ngFor="let serverElement of serverElements" 
    [srvElement]="serverElement"> 
    </app-server-element> 

從我所瞭解的

所以[srvElement] =「serverElement」表示我正在訪問此屬性的ServerElementComponent子類（即標註有@input

@Input('srvElement') element: {type: string, name: string, content: string}; 

所以基本上它究竟意味着之前的迭代？

我將其解釋以這種方式：

迭代的serverElements陣列上（即具有對應於設置@input領域指定字段組（Object的通用陣列'srvElement '）元素在應用服務器元素子組件中定義）。然後使用當前的元素在已使用的組件（用於主視圖）中構建一個@Input（'srvElement'）元素。

但我不知道這一點。這是什麼意思[srvElement] =「serverElement」語法？

也許我錯了，但在我看來就像一個投：我有一個鑄造由子組件所需要的類型的通用對象。我可以這樣做，因爲在子組件中定義的類型由裝飾器標記爲@Input（），所以它可以由父組件訪問。

它是一個正確的解釋？

Answer 1

我不是一個設備專業，所以我會盡量把它簡單地用我自己的話解釋給你聽：

你開始你的HTML（您的第一個模板）。在這裏面，你可以看到

<app-server-element 
    *ngFor="let serverElement of serverElements" 
    [srvElement]="serverElement"> 
</app-server-element> 

這裏有幾件事情：

• 首先，你可以看到選擇app-server-element。這意味着整個標籤將被您在組件中定義的HTML模板取代。
• 然後你有一個*ngFor。這是一個內置指令，允許您根據變量重複標籤。
• 最後，你有[srvElement]屬性。這是一個輸入屬性：等於（等於serverElement）右側的內容將發送到您的組件。

在您的組件現在，你可以看到

@Input('srvElement') element: {type: string, name: string, content: string}; 

這到底是怎麼做的，你搶你以前發送的輸入參考：通過這樣做，它告訴角到這個變量綁定由其「父」組件發送的內容。您還可以給出元素應具有的結構（對應於您在「父」中發送的變量的結構）。

所以，使其在一個句子中，第一個元素它給：

Iterate through serverElements, and for each item of this list, send this item to the "child" component and replace the app-server-element tag with the HTML template of the "child" component. 

對於第二個元素，它給出：

Grab the value the "parent" component sent you, and register it in a variable so that you can use it in my HTML template (server-element.component.html) 

我希望這可以幫助你。

Answer 2

在您的示例中，您有一個主要組件「app-component」，其中包含serverElements的列表。

主要成分的該模板包含這個循環：

<app-server-element 
    *ngFor="let serverElement of serverElements" 
    [srvElement]="serverElement"> 
</app-server-element> 

這意味着，角將在serverElements生成針對每個項的app-server-element組件。

[srvElement]="serverElement"意味着對於每個app-server-element組件，主要組件（應用程序組件）會將它當前的serverElement作爲input。

所以，如果你有serverElements 2項，將產生2個app-server-element組件：

• 第一部分將在serverElements
• 收到第一項第二部分將在serverElements
收到第二個項目

您將有2個不同的app-server-element組件實例。

@Input()裝飾者並不意味着accessible by the parent而it's a data the component can receive as input given by his parent。