Question

上下文

我正在尝试为angular2 dart构建一个菜单组件。
这是一个截图： Menu screenshot
- ＆GT;更多关于菜单项的糟糕格式化＆＃34;问题＆＃34;在下面标题

我有一个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

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

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

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

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

解决方案

将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中使用它，但不是用ng-bind属性绑定（它不再存在），我想我可以直接绑定到[textContent]属性，这被证明是错。

Angular2-Dart：组件模板未加载

上下文

问题

1 个答案:

解决方案

更深入的背景：