Angular2-Dart :组件模板未加载

Question

上下文

我正在尝试为angular2 dart.构建一个菜单组件

下面是一个截图：菜单截图

关于菜单项在“问题”标题下的糟糕格式的->更多信息

我有一个预览AppComponent，就像angular2风格建议的那样。它被调用，并且是引导组件。

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

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

问题是textContent在AppComponent模板中的jb-菜单项标记中的绑定.

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

这将禁用在jb-菜单项标记内的任何子组件的呈现！

解决方案

用普通花括号绑定jb-菜单项的文本内容，绑定到jb-菜单项标记，并删除到textContent的绑定。

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

更深层的背景：

角飞镖中有一个ng-bind指令，可以将某些东西绑定到标签的内容中，而不需要在标签和ng斗篷内使用双花括号。我想，我也可以在angular2-dart中使用它，但我认为可以直接绑定到textContent属性，而不是使用ng-bind属性(它已经不存在了)，事实证明这是错误的。