在bulma中编写一个角度应用程序，直接从模板站点复制模板进行测试，我收到此错误。我已经检查并检查了所有内容都已正确关闭，但不知何故，我仍然收到一个未关闭的导航错误。奇怪的是，当我删除关闭导航标签时，网站正确编译，但是已损坏。我不知道该怎么做。
代码
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
错误
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`
答案 0 :(得分：2)
就我而言，我忘记了标签中的细节
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
我忘了将{=“放在(click)="handleClickMe()
答案 1 :(得分：0)
使用正确的文本编辑器，然后它就会变得明显，这里发生了什么。您的容器div未关闭。
答案 2 :(得分：0)
通常，如果您看到＆＃34;意外结束标记<something>＆＃34;问题实际上不是<something>，而是相邻的元素没有被正确关闭。粘贴内容：https://validator.w3.org或任何类似的HTML验证器服务，或使用更好的编辑器/ IDE提供语法突出显示，以帮助您找到这些错误。
您缺少结束</div>标记。
您关闭了navbar-brand，navbar-menu和navbar-end，但未关闭<div class='container'>
由于这个缺失的</div>标记应该在 </nav>之前直接，因此您会收到错误，告诉您实际上您应该看到的确切位置。 ＆＃34;我发现</nav>我不希望看到！＆＃34; ...好的，所以去看看</nav>的哪个位置，找出附近缺少什么元素或者有错别字等等。
答案 3 :(得分：0)
您在结束标记之前缺少一个标记。
这是HTML
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
此外，您可以在此Plunk上看到它。
答案 4 :(得分：0)
为Angular添加以供将来参考
在您有这样无效的html的地方，我也看到过
<p>
<div>
</div>
</p>
将p更改为div即可