在Angular 7中,可以使用内联模板来显示HTML页面,而不需要创建额外的组件。以下是一个示例解决方法:
ng new inline-template-example
cd inline-template-example
app.component.ts
文件中,创建一个变量来存储HTML模板内容:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{ templateContent }}
`
})
export class AppComponent {
templateContent = `
Hello, Angular 7!
This is an example of displaying HTML page without creating additional components.
`;
}
app.module.ts
文件中,将AppComponent添加到模块的declarations
数组中:import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng serve --open
http://localhost:4200
,将会看到一个包含所定义的HTML页面内容的页面。这样,我们就成功地在不创建额外组件的情况下显示了HTML页面。请注意,在实际开发中,这种方法可能不是最佳实践,因为将HTML模板内容硬编码在组件中不够灵活和可维护。
上一篇:Angular 7:无论是否使用HTML安全性,div innerHTML绑定均不适用于位置HTML数据。
下一篇:Angular 7:响应预检请求未通过访问控制检查:请求中未包含“Access-Control-Allow-Origin”头部。