Angular2-Dart：组件模板未加载

Question

上下文

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

正如 angular2 风格所暗示的，我有一个 AppComponent 用于预览。这被称为引导组件。

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] 绑定。

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

这会禁用 ANY 渲染 jb-menu-item 标记内的子组件！

解决方案

将 jb-menu-item 的文本内容与普通花括号绑定到 jb-menu-item 标记并删除与 textContent 的绑定。

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

更深层次的背景：

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