将标题属性从main.component以角形式传递给header.component
提问于 2018-09-09 08:20:37
我已经在我的角项目中创建了一个标头组件，并希望将{{title}}属性从我的主app组件传递到我的头组件中，这样应用程序的标题在标题组件中总是可见的。
我将@Input() title: string;添加到具有核心输入导入的header组件中，然后在header html中调用属性{{title}}，但它是空的。所以我想我错过了什么但不确定是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-09 08:52:49
你没有提供足够的信息。以下是基于以下假设的答案，即您的头组件直接位于app组件内。
header.component.html
Title = {{title}}header.component.ts
@Component({
selector: 'header',
templateUrl: 'header.component.html',
styleUrls: ['./header.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class HeaderComponent {
@Input()
title: string;
}app.component.html
<header [title]="appTitle"></header>app.component.ts
app.component.ts {
appTitle = 'APP TITLE HERE';
}如果您的头不是直接在app.component.html内部，那么您需要使用
1. service to share the data between components
or
2. Pass title as a route data
or
3. Pass title as a query param注意:在这里使用服务是最好的选择，
Stack Overflow用户
发布于 2018-09-09 08:55:45
主要成分
html文件：
<header [title]="appTitle"></header>标头组件
ts文件
export class HeaderComponent {
@Input()
title: string;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52246418
复制相关文章
![Selenium：Chrome、Edge、Firefox、Opera、Safari常用WebDriver下载安装[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/7d5b26c5493876503114f2df2144276c.png)
点击加载更多
腾讯云开发者
