Question

这些天我正在学习角度2。我将以下代码添加到我的组件

@Component({
selector: 'events-app',
template: `
    <nav-bar><nav-bar>
    <events-list></events-list>
`
})

如您所见，我忘了关闭组件nav-bar的标记。奇怪的是，角度并没有引起任何错误。此外，当页面呈现时，它没有列出组件events-list

中的任何内容

为什么？

UPDATE1 这是events-list组件

import { Component } from '@angular/core'

 @Component({
selector: 'events-list',
template: `
    <div>
       <event-thumbnail [event]= "event1"></event-thumbnail>

    </div>
`
})

export class EventsListComponent{
event1 = {
    id: 1,
    name: 'Angular connect1',
    date: '9/26/2017',
    time: '10:00 am',
    price: '800'
  }

}

以下是nav-bar组件

@Component({
selector: 'nav-bar',
templateUrl: 'app/nav/navbar.component.html',
styles:[`
    .nav.navbar-nav {font-size: 15px;}
    #searchForm {margin-right: 100px;}
    @media (max-width: 1200px){#searchForm {display:none}}
`

]
})

export class NavBarComponent{

}

Answer 1

Html可以在不关闭标签的情况下支持标签，并且可以在不关闭标签的情况下提供自定义组件。

要了解您没有看到<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>组件模板的原因让我们重写模板

events-list

如下：

<nav-bar><nav-bar>
<events-list></events-list>

我们可以看到<nav-bar> <navbar> <events-list></events-list>是event-list的孩子，是另一个navbar的孩子。

您可以在此处试用https://alexzuza.github.io/enjoy-ng-parser/只需更改模板。

因此，如果您的nav-bar组件没有navbar ng-content将无法显示

所以你的模板应该是：

events-list

无法收到关于结束标签的投诉

1 个答案: