Angular2-飞镖 : Component Template not loading

Question

上下文

我正在尝试为 angular2 dart 构建一个菜单组件。
这是一个截图: Menu screenshot
-> 更多关于下面“问题”标题后菜单项的蹩脚格式

我有一个用于预览的 AppComponent，正如 angular2 样式所建议的那样。这称为 Bootstrap 组件。

AppComponent 模板包含我的菜单组件的代码，如下所示:

<jb-menu [activeBreakpoints]="activeBreakpoints"
     [collapsedStateBreakpoints]="collapsedStateBreakpoints"
     customCssPath="css/jbMenuStyles.css"
     #menu>

    <jb-menu-item *ngFor="let url of urls; let i=index"
              customCssPath="css/jbMenuItemStyles.css"
              [openInNewTab]="true"
              [disableNavigation]="true"
              [collapsedMode]="menu.isCollapsible"
              [url]="url"
              [active]="isActiveUrl(url)"
              [textContent]="menuItems[url]"
              (click)="onClick(url)">
    </jb-menu-item>
</jb-menu>

两个菜单组件(JbMenu 和 JbMenuItem)都在 AppComponent 中注册:directives: const [JbMenu, JbMenuItem])

我在两个组件中都有一些日志记录来测试正确的初始化，如下所示。

2016.43.17 08:43:25.124 jb_menu.jb_menu_item    
[INFO]: JbMenuItem constructor: 802477160 VM645:1 

2016.43.17 08:43:25.132 jb_menu.jb_menu_item    
[INFO]: JbMenuItem constructor: 785692334 VM645:1 

2016.43.17 08:43:25.133 jb_menu.jb_menu_item    
[INFO]: JbMenuItem constructor: 930402410 VM645:1 

2016.43.17 08:43:25.168 jb_menu.jb_menu_item    
[FINEST]:        hash: 802477160,
    url: http://www.w3schools.com/,
    customCssPath: css/jbMenuItemStyles.css,
    active: true,
    collapsedMode: false,
    isMenuButton: null,
    openInNewTab: true,
    disableNavigation: true 
 VM645:1 

2016.43.17 08:43:25.171 jb_menu.jb_menu_item    
[FINEST]:           hash: 785692334,
    url: http://www.apple.com/de/,
    customCssPath: css/jbMenuItemStyles.css,
    active: false,
    collapsedMode: false,
    isMenuButton: null,
    openInNewTab: true,
    disableNavigation: true
VM645:1 

2016.43.17 08:43:25.172 jb_menu.jb_menu_item    
[FINEST]:           hash: 930402410,
    url: http://www.chip.de/#,
    customCssPath: css/jbMenuItemStyles.css,
    active: false,
    collapsedMode: false,
    isMenuButton: null,
    openInNewTab: true,
    disableNavigation: true
VM645:1 

2016.43.17 08:43:25.180 jb_menu.jb_menu_component   
[FINEST]:           customCssPath: css/jbMenuStyles.css,
    collapsedStateBreakpoints: [small, medium, large],
    _operationMode: responsive,
    labelCollapsed = Menü,
    isOpen: true,
    isCollapsible: true

问题

控制台日志告诉我，JbMenu 和 JbMenuItem 都按预期进行了初始化。但是由于某些原因JbMenuItem 的模板没有加载。这也可以在这篇文章顶部的屏幕截图中看到，因为没有样式应用于菜单项

<jb-menu _ngcontent-mae-1="" customcsspath="css/jbMenuStyles.css" _nghost-mae-3=""><link _ngcontent-mae-3="" rel="stylesheet" type="text/css" href="css/jbMenuStyles.css">

    <nav _ngcontent-mae-3="" class="">
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
    <jb-menu-item _ngcontent-mae-1=""
                  customcsspath="css/jbMenuItemStyles.css" 
                  _nghost-mae-4=""> W3C Schools </jb-menu-item>
    <jb-menu-item _ngcontent-mae-1=""
                  customcsspath="css/jbMenuItemStyles.css" 
                  _nghost-mae-4="">Apple</jb-menu-item>
    <jb-menu-item _ngcontent-mae-1=""
                  customcsspath="css/jbMenuItemStyles.css" 
                  _nghost-mae-4="">Chip</jb-menu-item>
    </nav>
</jb-menu>

每个 JbMenuItem 组件都应该包含这个模板:

<!--External stylesheet which can be passed from the user to 
    incorporate outside styles for the inside template.
    CSS-Variables are not useful for now ;)-->
<link rel="stylesheet" type="text/css" [href]="safeCustomCssUrl">

<a [href]="url" 
   [class.active]="active
   [class.collapsed]="collapsedMode" 
   (click)="onClick($event)"
   [target]="target">
   <!--this will transclude the button content though this component-->
   <ng-content></ng-content>
</a>

有人知道如何解决这个问题吗？

提前致谢! :)

Answer 1

好吧，我自己找到了答案。

问题是 AppComponent 模板内 jb-menu-item 标签内 [textContent] 的绑定(bind)。

<jb-menu-item *ngFor="let url of urls; let i=index"
              ...
              [textContent]="menuItems[url]">
</jb-menu-item>

这将禁用 jb-menu-item 标签内子组件的任何渲染!

解决方案

将 jb-menu-item 的文本内容与普通花括号绑定(bind)到 jb-menu-item 标签，并移除对 textContent 的绑定(bind)。

<jb-menu-item *ngFor="let url of urls; let i=index">
    {{menuItems[url]}}
</jb-menu-item>

更深层次的背景:

angular-dart 中有一个 ng-bind 指令，用于将某些内容绑定(bind)到标签的内容，而无需在标签和 ng-cloak 中使用双花括号。我想，我也可以在 angular2-dart 中使用它，但我认为我可以直接绑定(bind)到 [textContent] 属性，而不是绑定(bind)到 ng-bind 属性(不再存在)，这被证明是错误的。