Question

在我的angular 2 redux app for root component中，我使用下一个模板：

<div class="app">
  <custom-header></custom-header>
  <router-outlet></router-outlet>
  <custom-footer></custom-footer>
</div>

所以，我在每条路线上都有相同的页眉和页脚。我想为每个应用程序组件创建这样的东西：一些容器将为每个页面添加一些常见样式（例如：具有自定义标题和页面自定义html的面板）。在React中，我可以创建下一个组件：

const CustomWrapper = ({ title, sidebar, children }) => (
  <div>
    <h2>{title}</h2>
    { sidebar &&
      <div className="sidebar">{sidebar}</div>
    }
    <div style={{some condtitional styles}}>{children}</div>
  </div>
);

然后

const SidebarPage = () => (
  <CustomWrapper
    title="Title from state or"
    sidebar={<div>JSX template for sidebar</div>}
  >
    <div>JSX template for page content</div>
  </CustomWrapper >
)

并使用SidebarPage作为某些路线。因此，CustomWrapper可用于相同样式的每个页面，并根据道具和某些条件定制部件。

对于这种情况，角度2方式是什么？

Answer 1

您可以创建从主要组件接收@Inputs的页眉和页脚组件，也可以根据您选择的路线更新服务。

@Component{}
export class Header implements OnInit {

    constructor(private myService: RouteChangedService){}

    ngOnInit(){
        this.myService.routeUpdated().subscribe(data => { this.updateView(data) } )
    }
}

通过这种方式，你可以拥有一个像上面一样的常量页眉和页脚：

<header></header>
<router-outlet></router-outlet>
<footer></footer>

在组件实例化上调用routeUpdated以通知它们新路由并相应地更新其视图和逻辑。您也可以利用路由器根据路由名称调用这些服务，但我自己也没有这样做。

Angular 2方式用于创建包装器组件

1 个答案: