在Angular 9中,组件渲染是通过使用组件模板来实现的。以下是一个包含代码示例的解决方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
Welcome to My Component!
{{ message }}
`
})
export class MyComponent {
message = 'This is a message from my component.';
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my-component.component';
@NgModule({
imports: [BrowserModule],
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
以上代码示例中,MyComponent
是一个Angular组件,它通过template
属性定义了组件的模板。模板中使用了插值表达式{{ message }}
来展示组件中的消息。然后,MyComponent
被引入并声明在AppModule
中,最后通过bootstrapModule
方法将AppModule
引导到浏览器中。在HTML文件中使用
来渲染该组件。当应用启动时,浏览器将渲染该组件并显示模板中的内容。