下面是我在 Angular 应用程序中的组件结构，
-
应用程序组件.html
-
单位.component.html
-
节.组件.html
{{appData.标题}}
我正在 app.component.ts 中创建“appData”，我想在子组件的第三级（即应用程序部分组件中）使用它。
我怎样才能做到这一点？
对于这种情况，您可以使用共享服务在组件之间进行通信。
创建这样的共享服务。
@Injectable()
export class SharedDataService {
public set appData(data: any) {
this._appData = data;
}
public get appData(): any {
return this._appData;
}
}
然后注入SharedDataService to the app.component。并设置appData到服务。
应用程序组件.ts
constructor(private sharedDataService: SharedDataService) {
}
public setAppData(): void {
this.sharedDataService.appData = this.appData;
}
并注入SharedDataService to the app-section.component那么你可以得到appData从服务。
应用程序部分.component.ts
constructor(private sharedDataService: SharedDataService) {
}
public getAppData(): void {
this.appData = this.sharedDataService.appData;
}
然后您就可以访问appData在这样的模板中。
应用程序部分.component.html
{{appData}}
Angular 组件之间的通信有多种方式。这就是所谓的组件交互。您可以在 Angular 官方文档中阅读更多相关信息。组件交互 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
