在Angular 8中,可以使用Input装饰器来将数据传递给子路由。下面是一个示例代码:
在父组件中,定义一个变量来存储要传递给子组件的数据:
// 父组件.ts文件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Data: {{ data }}
`,
})
export class ParentComponent {
data = 'Hello from parent component';
}
在子组件中,使用@Input装饰器来接收父组件传递的数据:
// 子组件.ts文件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Data from parent: {{ childData }}
`,
})
export class ChildComponent {
@Input() childData: string;
}
在父组件的模板中,使用子组件的选择器来传递数据给子组件,将父组件的数据绑定到子组件的childData属性上。
这样,父组件的数据就会传递给子组件,并在子组件中显示出来。
请注意,父组件和子组件都需要在模块文件中进行声明和导入。