Question

我正在使用Angular 2创建一个演示Web应用程序。

此应用程序由带有导航栏的主页面和（现在）2个带有该导航栏组件的模块组成。因此，每个模块都应在主屏幕的导航栏上显示其按钮。

我试图使用非高级Angular尽可能简单。

不幸的是，我无法将多个不同组件的选择器设置为相同的值，或者在html中不包含一个而是包含两个属性而不会出现“模板分析错误”。另外，我也无法在主html中包含两个span-tags，每个span-tags都包含Bootstrap css中断的不同模块的selector属性，并创建一个多行导航栏。再次在这里，我希望尽可能接近原生Bootstrap。

所以我的问题基本上是如何从不同的组件/模块创建Bootstrap导航栏和'注入'导航栏项目（按钮，搜索栏等）？

第1单元：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: '[ticket-navbar]',
  templateUrl: 'ticket.component.html',
  styleUrls: ['ticket.component.css']
})

export class TicketComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

第2单元：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: '[user-navbar]',
  templateUrl: 'user.component.html',
  styleUrls: ['user.component.css']
})

export class UserComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

主页面中的html应显示包含模块中的导航栏项目：

    <!-- navbar menu items -->
    <div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
        <ul class="nav navbar-nav navbar-right list-inline" ticket-navbar user-navbar>
        </ul>
    </div>
    <!-- navbar menu items -->

Answer 1

如果您使用组件而不是属性指令，我认为您可以实现您尝试做的事情：

<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
    <ul class="nav navbar-nav navbar-right list-inline">
        <ticket-navbar></ticket-navbar>
        <user-navbar></user-navbar>
    </ul>
</div>

然后只需更改您的选择器：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ticket-navbar',
  templateUrl: 'ticket.component.html',
  styleUrls: ['ticket.component.css']
})

export class TicketComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

和：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'user-navbar',
  templateUrl: 'user.component.html',
  styleUrls: ['user.component.css']
})

export class UserComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

angular2 navbar组件注入

1 个答案: