要在Angular中扩展父组件的HTML,可以使用@Input
装饰器来接收父组件传递给子组件的数据,并在子组件的HTML中使用这些数据。
以下是一个示例,展示了如何在子组件中扩展父组件的HTML:
{{ title }}
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
title = 'Parent Component';
content = 'This is the parent component content.';
}
Child Component
{{ content }}
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() content: string;
}
在上述示例中,通过在子组件的类型脚本文件中使用@Input
装饰器,可以将父组件传递的content
数据绑定到子组件的content
属性上。然后,可以在子组件的HTML中使用{{ content }}
来显示这个数据。
在父组件的HTML中,使用
标签来引入子组件,并通过属性绑定将父组件的content
属性传递给子组件。
这样,子组件就可以扩展父组件的HTML,显示父组件传递的数据。