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

对组件进行子类化是一种方法。
您可以使用多个视图装饰器，原因如下：

@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 {
}

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

Angular 2使得可以编写具有可在所有dom平台（浏览器，节点，web-worker）上运行的单个视图的组件。

所以你可以做以下事情：

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

Answer 2

注意：这可能都会改变，因为Angular 2仍然是alpha。

AngularConnect 2015就此有好几次讨论。

但是，特别是，你想要签出Angular Universal，它是Angular 2的“Universal”（又名同构）（也就是服务器上的应用程序）。

同样，为了渲染到React-Native，有一个library growing here，其中包含更多相关信息。

我希望有所帮助。

（PS：标记为社区维基，因为答案太模糊了）;）

Answer 3

当Angular 2的第一次瞥见开始出现一年多以前，这是我最感兴趣的一个特定领域。最初，我更多地考虑了Victor上面提到的关于为每个目标平台提供多个@View装饰器的方法。这仍然在工作中，没有记录，或者不再计划（我不确定？）。

然而，随着事态的发展，我开始通过使用自定义Decorators看到更清晰的整合潜力。我在这里详细介绍了这个策略：http://angularjs.blogspot.com/2016/03/code-reuse-in-angular-2-native-mobile.html

此外，我已在此处证明了这一策略：https://github.com/NathanWalker/angular2-seed-advanced

我期待其他替代方法，但仍然不确定什么是最好的（如果有这样的东西），但我喜欢到目前为止定制的Decorator方法。

构建步骤可以使用Victor提到的正确@View装饰器来构建不同版本的应用程序的想法仍然听起来非常有用，并且希望（至少在某种形式上）仍然在路线图上对于Angular 2.0。

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

3 个答案: