要在HTML页面中使用Angular值,你需要在组件中定义变量,并在HTML模板中使用插值表达式来连接这些值。
以下是一个示例解决方法:
name
:export class AppComponent {
name = 'John Doe';
}
Welcome, {{ name }}
这样,当页面加载时,Angular会自动将变量name
的值替换到{{ name }}
的位置。
完整的代码示例: app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `Welcome, {{ name }}
`,
})
export class AppComponent {
name = 'John Doe';
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {}
index.html:
Angular App
这样,当你在浏览器中打开应用时,你将看到页面上显示Welcome, John Doe
。