变量和插值

所谓 “插值” 是指将表达式嵌入到标记文本中。 默认情况下，插值会用双花括号 {{ 和 }} 作为分隔符。

变量语法：修饰符 变量名: 数据类型 = xxx;，其中修饰符和数据类型可以省略，数据类型的具体内容查看参考来源。

公共，私有与受保护的修饰符

此处的解释仅适用于 Angular 组件当中，更多解释查看参考来源。

• 公共的 public：在类的内外都可以使用；
• 私有的 private：只有在类当中才可以使用；
• 受保护的 protected：只有在当前类和它的子类中可以使用。

我们需要先在 news 组件（src/app/components/news/news.component.ts）中定义变量：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  public title: string = '新闻页';
  constructor() { }
  ngOnInit(): void {
  }
}

然后在 new 组件页面（src/app/components/news/news.component.html）中插值：

<p>news works!</p>
<app-header></app-header>
<h1>{{title}}</h1>

参考来源

• 基础类型・TypeScript 中文网・TypeScript——JavaScript 的超集
• 类・TypeScript 中文网・TypeScript——JavaScript 的超集
• Angular - 插值与模板表达式

[

](https://www.tslang.cn/docs/handbook/basic-types.html)