Question

我正在关注Angular 2速成课程。我安装了节点v7.10.0和npm 4.2.0。从一个'hello World＆＃39;开始使用root app.component.ts的应用程序，我创建了一个简单的自定义组件test.component.ts：

import { Component } from 'angular2/core'

@Component({
        selector: 'test',
        template: `<h2>{{ title }}</h2>`
})

export class TestComponent {
        title: "Just testing ...";
}

我在应用程序的根组件（app.component.ts）中导入和引用TestComponent：

import {Component} from 'angular2/core';
import {TestComponent} from './test.component';

@Component({
    selector: 'my-app',
    template: '<h1>Hello Angular 2</h1><test></test>',
    directives: [TestComponent]
})
export class AppComponent { }

它只呈现＆＃34; Hello Angular 2＆＃34;在浏览器中，而不是＆＃34;只是测试...＆＃34;串。

我认为问题可能在模板中（反引号或类似），但我无法看到我做错了什么。控制台会发出一些弃用警告，但似乎与我的渲染问题无关：

angular2-polyfills.js:1152 DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask
angular2.dev.js:353 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
angular2-polyfills.js:1152 DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask

Answer 1

这是角4.0.0的解决方案

<强> app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { TestComponent }  from './test.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, TestComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

<强> app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello Angular 2</h1><test></test>`
})
export class AppComponent {}

<强> test.component.ts

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

@Component({
    selector: 'test',
    template: `<h2>{{ title }}</h2>`
})

export class TestComponent {
    title = 'Just testing ...';
}

Angular2：插值不渲染

1 个答案: