意外的结束标签角度错误

Question

在 bulma 中编写一个 angular 应用程序，直接从模板站点复制模板进行测试，我收到此错误。 我已经检查并检查过，一切都已正确关闭，但不知何故，我一直收到未关闭的导航错误。 奇怪的是，当我删除结束导航标签时，该站点可以正确编译，但已损坏。 我不知道该怎么办。

代码

<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>`

Answer 1

就我而言，我忘记了标签中的一个细节

    <button class="btn btn-primary" (click) "handleClickMe()
    ">Click me !</button>

我忘了把“=”放在(click)="handleClickMe()

Answer 2

通常，如果您看到“意外的结束标记<something> ”，问题实际上并不在于<something> ，而是与未正确关闭的相邻元素有关。 在此处粘贴内容： https : //validator.w3.org或任何类似的 HTML 验证器服务，或者使用更好的编辑器/IDE 提供语法突出显示以帮助您找到这些错误。

您缺少结束</div>标记。 您关闭了navbar-brand 、 navbar-menu和navbar-end但您没有关闭<div class='container'>

由于这个缺失的</div>标签应该直接在</nav>之前，你会得到错误告诉你，事实上，你应该看的地方。 “我发现了一个我没想到会看到的</nav> ！” ... 好的，所以去看看你有</nav> ，找出附近的哪个元素丢失或有错别字等。

Answer 3

添加以供将来参考，用于 Angular

我也看到过这样的无效 html

<p>
  <div>
  </div>
</p>

将 p 更改为 div 它将起作用

Answer 4

使用适当的文本编辑器，那么这里发生的事情就会变得很明显。 您的容器 div 未关闭。