typescript - Angular2 (2.0.0-beta.17) NgSwitchWhen 给出 "No provider for TemplateRef!"

Question

我已经被这个难住了好几个小时了。是时候让你们中的一个人告诉我我做错了什么了:)

以下组件因“没有 TemplateRef 提供者!”而失败。一个 plunker 可用 here .我从 here 得到了 ngSwitch 语法.

import {Component} from '@angular/core'
//This should make the NgSwitch family available, right?
import {CORE_DIRECTIVES} from '@angular/common'
// I get same result with explicit import
// import {NgSwitch,NgSwitchWhen} from '@angular/common' 

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div [ngSwitch]="switchValue">
        <div ngSwitchWhen="42">It's 42!</div>
        <div ngSwitchWhen="21">It's 21!</div>
      </div>
    </div>
  `,
  directives: [CORE_DIRECTIVES]
  // directives: [NgSwitch,NgSwitchWhen]
})
export class App {
  switchValue = 42;
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

Answer 1

如果您使用带有隐式 <template> 的短语法你需要添加 *

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div [ngSwitch]="switchValue">
        <div *ngSwitchCase="42">It's 42!</div>
        <div *ngSwitchCase="21">It's 21!</div>
        <!-- before RC.2 
          <div *ngSwitchWhen="42">It's 42!</div>
          <div *ngSwitchWhen="21">It's 21!</div>
        -->
      </div>
    </div>
  `,
})
export class App {
  switchValue = 42;
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

另见 NgSwitch directive