HTML 代码只显示 {{title}} 而不是变量名答案

【问题标题】：HTML code only shows {{title}} instead of variable nameHTML 代码只显示 {{title}} 而不是变量名
【发布时间】：2021-02-18 14:13:37
【问题描述】：

我目前正在关注这个教程：https://www.youtube.com/watch?v=WlAq06Z_25Y&list=PL8p2I9GklV45JZerGMvw5JVxPSxCg8VPv&index=4

what i want

但html只显示

what i get:

我正在尝试学习 Angular，但是如果您尝试跟随 turturial 但有些事情就是不匹配，这会非常令人困惑

代码：

app.module.ts 代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'blog';
}

app.component.html 代码：

<h1>Hello World !</h1>
<h2>{{title}}</h2>

app.component.spec.ts 代码：

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'blog'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('blog');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('blog app is running!');
  });
});

【问题讨论】：

控制台有错误吗？
分享你的component.ts和component.html
请显示您正在尝试的代码。
你在哪里打开应用程序？如果您直接在浏览器中打开 .html 文件，显然它将按原样呈现。 Angular 应用程序应该由服务器提供。如果您使用ng serve 测试应用程序，默认情况下它在http://localhost:4200 中提供。您需要打开此 URL 而不是直接打开文件。
另外，如果你是新手，我强烈建议你去他们的official tutorial。它相当简短，介绍了框架的许多基础知识。

标签： javascript html angular

【解决方案1】：

您需要使用ng serve 运行您的应用程序，然后在localhost:4200 上验证您的输出。如果您需要在任何其他端口上运行它，请使用ng serve --port:portnumber

【讨论】：

使用angular.io/tutorial 更好地理解角度。

【解决方案2】：

尝试创建一个公共方法在组件之间传递它：

export class AppComponent {
  public title = "blog";
}

<h2>{{ title }}</h2>

【讨论】：

试过了，但是好像不行i.imgur.com/ZoybPCe.png
检查控制台是否显示错误，组件和选择器之间的通信不工作
在 concole 中看不到任何东西....i.imgur.com/9RZkjJs.png
执行以下操作： 1. 创建 home.component 2. 在 app-routing 中创建一个常量并添加 HomeComponent 类 const routes: Routes = [ { path: '', component: HomeComponent} ]; 3. 将您的 html 应用程序添加到 home.html 和您的 ts应用到 home.ts 4. 在 html 应用中只需放

【解决方案3】：

我使用了 5200 端口，但我应该使用 4200 端口。现在可以了

【讨论】：