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

发布时间：2020-12-17 08:32:45 所属栏目：安全来源：网络整理

导读：因此,angular2将支持多个渲染引擎( HTML,本机通过NativeScript和React Native),这个开发故事是什么样的？有动态模板切换吗？或者应该通过子类别来处理？ // TypeScript ahead// Base component implementationclass FooComponent { public name: string = '

因此,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();
  }
}

>对组件进行子类化是一种方法.
>您可以使用多个视图装饰器导致以下内容：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!