在Angular 9中,可以通过使用@Input和@Output装饰器来共享组件之间的HTML。下面是一个示例:
首先,创建一个父组件,该组件将包含共享的HTML代码。
parent.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Message from child: {{childMessage}}
`,
})
export class ParentComponent {
message: string = 'Hello from parent';
childMessage: string;
receiveMessage($event) {
this.childMessage = $event;
}
}
然后,创建一个子组件,该组件将接收父组件传递的消息并将其显示在HTML中。
child.component.ts:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Message from parent: {{message}}
`,
})
export class ChildComponent {
@Input() message: string;
@Output() messageEvent = new EventEmitter();
sendMessage() {
this.messageEvent.emit('Hello from child');
}
}
最后,在父组件的模块中引入并声明这两个组件。
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
@NgModule({
declarations: [AppComponent, ParentComponent, ChildComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
现在,当你运行应用程序时,你将看到父组件和子组件的HTML代码共享并显示在应用程序中。
这就是在Angular 9中共享组件之间的HTML的解决方法。