Question

我已经被这个困了几个小时了。现在是时候让你们其中一个人告诉我我做错了什么：）

以下组件因“没有TemplateRef提供商！”而失败。可以使用羽毛球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

Angular2（2.0.0-beta.17）NgSwitchWhen给出“没有提供TemplateRef的提供者！”

1 个答案: