不管前端框架是用 ReactJS，还是 VueJS，最终渲染到浏览器上的都是 Dom 对象，一颗 Dom 树。而 ApplicationShell 接口正是对不同前端框架挂载到真正的 Dom 树上的一个抽象。

接口定义

  1. export interface ApplicationShell {
  2.     attach(host: HTMLElement): void; // host 是前端应用真正要挂载到的 Dom 对象
  3. }

简单实现

以下是框架默认的简单实现，真实场景应该需要替换掉默认实现：

  1. @Component(ApplicationShell)
  2. export class ApplicationShellImpl implements ApplicationShell {
  3.     attach(host: HTMLElement): void {
  4.         host.textContent = 'Hello, Malagu.';
  5.     }
  6. }

ReactJS 实现

需要替换掉框架默认的简单实现：

  1. @Component({ id: ApplicationShell, rebind: true })
  2. export class Shell implements ApplicationShell {
  4.     attach(host: HTMLElement): void {
  5.         ReactDOM.render(<App/>, host);
  6.     }
  7. }