以下是一个使用Angular的父组件和子组件的示例代码:
父组件的HTML模板:
{{ title }}
父组件的JavaScript代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
title = '父组件';
message = '这是来自父组件的消息';
}
子组件的HTML模板:
{{ message }}
子组件的JavaScript代码:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() message: string;
}
在这个示例中,父组件通过在子组件上使用[message]="message"
属性绑定将消息传递给子组件。子组件使用@Input()
装饰器来接收从父组件传递的消息,并在模板中显示出来。