我能够将数据从一个组件ts文件传递到另一个组件HTML文件。请参考下面的代码:
export class TestComponent {
@Component({
selector: 'app-data',
})
@Input() data : string;
}
在我的另一个组件HTML文件中,我可以使用它,如下所示:
<app-data [data] = "Hello"></app-data>
我的问题是,我想从另一个组件.ts文件传递数据,而不是从另一个组件HTML文件传递数据。我找到了使用服务和发射器的解决方案,但我想使用@Output()
。
请让我知道可行的解决办法。
编辑用例
我正在尝试添加一个共享组件,其中包含一些模板。并且模板根据使用模板的组件进行更新。我根据模板要求更新了很多字符串消息。
所以问题是如果我从HTML传递所有字符串,我的代码看起来会很脏。所以我正在寻找而不是从HTML传递它我想从ts文件中传递它。
注意:两个组件处于同一级别。
答案 0 :(得分:1)
我不知道你为什么要这样,但你可以做以下事情。
Child.component.ts
@Component({
selector: 'child',
template: `{{data}}`
})
export class ChildComponent {
data;
}
Parent.component.ts
@Component({
selector: 'parent',
template: `<child><child>`
})
export class ParentComponent implements AfterViewInit {
// ViewChild lets you access your inner views.
// But, be careful, it may take some time to initialize your view.
@ViewChild(Child) childComponent: ChildComponent;
// you have to do it within this life cycle method
// so that you'll know your view is initialized.
ngAfterViewInit() {
this.childComponent.data = 'Hello World';
}
}
根据您的使用案例
如果您不想通过模板传递大量参数,可以定义一个输入(让我们调用它设置)并传递一个json对象。
E.g。
Child.component.ts
export interface Settings {
optionA: string;
optionB: string;
optionC: string;
}
@Component({
selector: 'child',
template: `{{settings?.optionA}}`
})
export class ChildComponent {
@Input() settings: Settings;
}
Parent.component.ts
@Component({
selector: 'parent',
template: `<child [settings]="mySettings"><child>`
})
export class ParentComponent implements OnInit {
mySettings: Settings;
ngOnInit() {
this.mySettings = {
optionA: 'A',
optionB: 'B',
optionC: 'C'
};
}
}