angular 管道无法在本地主机上呈现

Question

我正在学习如何在 Angular 中使用管道，并且我遵循以下教程中的说明和指导：

https://www.tektutorialshub.com/angular/angular-pipes/

我面临的问题是，当我运行

ng serve --open

我没有看到下面代码中显示的 templateUrl 中指定的文本。

我得到的 ID 如下所示的页面请告诉我为什么 html 无法呈现

app.component.ts:

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

@Component({
    selector: 'app-root',
    templateUrl: `<p> Unformatted date : {{toDate }} </p>
                  <p> Formatted date : {{toDate | date}} </p>` 
}) 
export class AppComponent 
{ 
    title: string = 'pipe Example' ; 
    toDate: Date = new Date(); 
}

更新:

我也尝试了以下但没有用

**app.component.ts**:

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

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html' 
    }) 
    export class AppComponent 
    { 
        title: string = 'pipe Example' ; 
        toDate: Date = new Date(); 
    }

    
**app.component.html**:

    <p> Unformatted date : {{toDate }} </p>
    <p> Formatted date : {{toDate | date}} </p>

图片:

Answer 1

您需要这样赋值：

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

    @Component({
        selector: 'app-root',
        template: `<p> Unformatted date : {{toDate }} </p>
                      <p> Formatted date : {{toDate | date}} </p>` 
    }) 
    export class AppComponent 
    { 
        title: string = 'pipe Example' ; 
        toDate: Date = new Date(); 
    }
        }

Answer 2

将templateUrl替换为template。

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

@Component({
    selector: 'app-root',
    template: `<p> Unformatted date : {{toDate }} </p>
                  <p> Formatted date : {{toDate | date}} </p>` 
}) 
export class AppComponent { 
    title: string = 'pipe Example' ; 
    toDate: Date = new Date(); 
}

https://devconquer.com/angular/template-vs-templateurl/

堆栈闪电战：https://stackblitz.com/edit/angular-ivy-zefd2f?file=src/app/app.component.ts

Answer 3

将 templateUrl 属性更改为 template。

@Component({
  selector: 'app-root',
  template: `<p> Unformatted date : {{ toDate }} </p>
             <p> Formatted date : {{ toDate | date}} </p>` 
})

angular 管道无法在本地主机上呈现

angular pipe can not be rendered on the locallhost

javascript

node.js

angularjs

angular