傳遞和顯示角度組件5

Question

我有一種情況，我需要將不同的“組件”列表傳遞給另一個角度組件。 我使用@Input將組件列表作為數組傳遞。 如何在HTML中呈現這些組件？

Answer 1

看到一些代碼來了解您要完成的工作會很有幫助。

從文檔中， @ Input（）

• Input屬性是用@Input裝飾器注釋的可設置屬性。 當數據與屬性綁定綁定時，值會流入屬性

@Input()批注用於傳遞數據。 它不用於將組件傳遞到另一個組件。

要在另一個組件內顯示另一個組件，請在父組件內引用嵌套組件的選擇器。 選擇器是組件元數據的一部分

• selector ：CSS選擇器，它告訴Angular在模板HTML中找到相應標簽的任何地方創建並插入此組件的實例。 例如，如果應用程序的HTML包含，則Angular會在這些標簽之間插入HeroListComponent視圖的實例。

app-hero-list.component.ts

創建一個組件並在元數據中提供一個選擇器。

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

app.component.html

然后，您可以將該選擇器引用為另一個組件模板中的一對HTML標記。

<app-hero-list></app-hero-list>

查看上面引用的組件元數據鏈接和Angular教程，以獲取有關在其他組件中顯示組件的更多信息。

如果您需要更詳細的答案，請使用代碼示例更新您的問題。