如何支持/利用angular2的多个渲染器？

Question

因此,angular2将支持多个渲染引擎(HTML,本机通过NativeScript和React Native),这个开发故事是什么样的？

有动态模板切换吗？或者应该通过子类别来处理？

// TypeScript ahead

// Base component implementation
class FooComponent {
  public name: string = 'my name';
  public makeFormal () {
    this.name = this.name.toUpperCase();
  }
}

// HTML Component
@Component({
  selector: '<foo></foo>'
  template: `
    <div>{{name}}</div>
    <button (click)="makeFormal()">Make Formal</button>
  `
})
class FooHtmlComponent extends FooComponent {
  constructor(){
    super();
  }
}

// Native Component
@Component({
  selector: '<foo></foo>'
  template: '... [native stuffs here] ...'
})
class FooHtmlComponent extends FooComponent {
  constructor(){
    super();
  }
}

Answer 1

1. 对组件进行子类化是一种方法.

2. 您可以使用多个视图装饰器导致以下内容:

@Component({selector:'foo', template: `some nativescript template`})
class Foo {}

是相同的:

@Component({selector:'foo'`})
@View({
  template: `some nativescript template`
})
class Foo {}

接下来,您将能够为同一组件提供多个视图.

@Component({selector:'foo'})
@View({
  template: `some nativescript template`,
  platform: 'nativescript'
})
@View({
  template: `some dom stuff`,
  platform: 'dom'
})
class Foo {
}

最后,构建步骤将为每个平台创建一个包,其中所有代码都会删除其他平台.可以使用相同的技术为组件提供特定于语言的模板.

3. Angular 2使得可以编写具有可在所有dom平台(浏览器,节点,web-worker)上运行的单个视图的组件.

所以你可以做到以下几点:

@Component({selector:'foo', template: `some dom template`})
class Foo {}