将组件信息传递给另一个组件

Question

我有多个组件及其html页面，每个页面包含标题，页面类型（副标题）和id。现在，我没有将这些信息添加到每个页面，而是希望创建一个包含此特定信息的组件，并将其作为选择器添加到所有组件中，这样我就可以统一并控制每个页面上的结构。我还需要在点击后将一些内容路由到另一个页面。

我正在查看它的方式是将包含标题，副标题和ID的DetailComponent将被视为我相信（？）的父组件，并且从所有其他页面我将作为子组件发出所需信息。如果我错了，请纠正我。不确定我想要的这种结构是父子关系还是兄弟姐妹。

所以在子组件html页面中我会：

<detail-component [pagetitle] = "page.title" [pageId]="page.id"></detail-component>

在子组件中：

@Output()
public pageInfo: new EventEmitter<any>();

this.pageInfo.emit({...})  

在DetailComponent.html中：

<div>
   <h1>{{page.title}}</h1>
   <h2>{{page.subTitle}} " - " {{page.Id}}</h2>
</div>

我有点失去了把所有这些连接起来得到我想要的东西，任何帮助将不胜感激。

一个页面的示例，我有五个这样的页面，每个html页面正在从它组件填充：

<div class="pageInfo">
<h2>{{Title}}Title of this page here</h2>
<h3>{{ID}}:{{Subtitle}} Subtitle of page here</h3>
</div>

我想将这个html移动到父html页面然后从每个子组件我将发出我需要的信息，如标题，id和副标题到父组件，并从子html页面我将替换标题info html with

Answer 1

基本上你的逻辑很好，但你省略了(pageInfo)="..."所以添加到你的孩子html选择器。

<detail-component [pagetitle]="page.title" [pageId]="page.id" (pageInfo)="handlePageInfo($event)"></detail-component>

但是，如果它是多嵌套的子级，那么处理数据可能会有点痛苦。你总是可以将它与@Injectable服务结合起来，但是在组件之间建立连接也会很痛苦。对于@Input @Output解决方案是每个child也应具有属性，如果它有parent。做一个循环，直到它没有parent。

Answer 2

那么你想要创建的是父子关系。你可以做的就是一个包含多个组件的单个页面：

亲

------------

蔡尔兹

那么你怎么能这样做：

在父HTML中：

<detail-component *ngIf="child1" [pagetitle] = "page.title" [pageId]="page.id"></detail-component>
<detail-component2 *ngIf="child2" [pagetitle] = "page.title" [pageId]="page.id"></detail-component2>
<detail-component3 *ngIf="child3" [pagetitle] = "page.title" [pageId]="page.id"></detail-component3>

像这样你将child1或2或3置于true并将数据放入其中（可以是不同的值和变量）。

要发回信息可以使用@Output，如：

<detail-component *ngIf="child1" [pagetitle] = "page.title" [pageId]="page.id" (output)="setOutput($event)"></detail-component>

在父母的一个功能：qazxsw poi