从类更改组件装饰器Angular 2的属性

Question

I want to change template after some action happens

@Component({
  ... 
  template: this.myTemplate
})

export class App {
  myTemplate: = 'Here is first template';

  // Replace templates
  public changeTempate() {
    myTemplate = 'Here is second template';
  }

How to make this code work?

Answer 1

Finally It was made in Angular 2.3.0 Here is simple sample:

//our root app component
import {Component, NgModule, Input, Output, EventEmitter, HostBinding, HostListener} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'person',
  //template will NOT be inherited 
  template: `<h4>Person: {{name}}</h4>`
})
export class Person {
  @Input() name; //will be inherited
  //  @Output() onClick = new EventEmitter(); //will be inherited
  //  clicked() { //will be inherited
  //    this.onClick.emit(this.name);
  //  }
  @HostBinding('style.color') color = 'red';  //will be inherited

  @HostListener('click', ['$event']) //will be inherited 
  onClick(e){
    console.log(this.name);
  }
}

@Component({
  selector: 'employee',
  template: `
    <h4>Employee: {{name}}, id: {{id}}</h4>
  `
})
export class Employee extends Person {
  @Input() id; // new

  @HostListener('click', ['$event']) // overridden
  onClick(e) { 
    console.log(`${this.name}-${this.id}`);
  }
}


@Component({
  selector: 'my-app',
  template: `
    <div>
      <person name="John"></person>
      <employee name="Tom" id="45231"></employee>
    </div>
  `,
})
export class App { }

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Person, Employee ],
  bootstrap: [ App ]
})
export class AppModule {}

For more information please read

https://medium.com/@gerard.sans/angular-2-new-features-in-angular-2-3-f2e73f16a09e#.33fk3molt