angular - 如何支持/利用 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. 您可以使用多个 View 装饰器导致以下情况:

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

等同于:

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

接下来，您将能够为同一组件提供多个 View 。

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

最后，构建步骤将为每个平台创建一个包，并删除所有针对其他平台的代码。相同的技术可用于为组件提供特定于语言的模板。

1. Angular 2 使编写具有单一 View 的组件成为可能，该组件可以在所有 dom 平台(浏览器、节点、网络 worker )上运行。

因此您只需执行以下操作:

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