Question

注意：此问题与Angular directive crashing browser 非常相似，但与创建的AngularJS组件的确切冲突仍有所不同。

所以我创建了一个非常简单的 nav 组件，在将该组件添加到另一个组件的模板后，我的浏览器选项卡崩溃了。

因为它立即崩溃，所以我无法从控制台看到任何输出。

这是我的设置：

HTML

<div id="header">
    <div id="header_main">
        <nav></nav>
    </div>
</div>

导航模板

<div class="dark-blue-section main-color">
  <div class="container">
    <nav class="navbar" role="navigation">
      <div class="navbar-header center-mobile">
        <div class="phone-wrap circled white small-btn mobile-only">Call <a send-ga-notification url="call" to="phone" mobile-only="true" href="tel:{{ $ctrl.digits }}">1.{{ $ctrl.phone }}</a></div>
        <div class="phone-wrap desktop-only">Call <a send-ga-notification url="call" to="phone" mobile-only="true" href="tel:{{ $ctrl.digits }}">1.{{ $ctrl.phone }}</a></div>
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true"
          ng-click="navCollapsed = !navCollapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-menu3"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">

        <ul class="nav navbar-nav navbar-right desktop-only">
          <li ng-class="{ active: isActive('/financing-and-insurance') }">
            <a ui-sref="index.financing-and-insurance" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Financing &amp; Insurance
            </a>
          </li>
          <li ng-class="{ active: isActive('/ortho-and-braces') }">
            <a ui-sref="index.ortho-and-braces" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Ortho &amp; Braces
            </a>
          </li>
          <li ng-class="{ active: isActive('/your-first-visit') }">
            <a ui-sref="index.first-visit" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Your First Visit
            </a>
          </li>
          <li ng-class="{ active: isActive('/careers') }">
            <a ui-sref="index.careers" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Careers
            </a>
          </li>
          <li ng-class="{ active: isActive('/contact') }">
            <a ui-sref="index.contact" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Contact Us
            </a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right mobile-only">
          <li ng-class="{ active: isActive('/locations') }">
            <a ui-sref="index.locations" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Find An Office
            </a>
          </li>
          <li>
            <a href="" ng-class="{ active: isActive('/appointment') }" ng-click="clickToOpen()" uib-dropdown-toggle>
             Request An Appointment
            </a>
          </li>
          <li ng-class="{ active: isActive('/offers') }">
            <a ui-sref="index.offers-and-discounts" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Offers &amp; Discounts
            </a>
          </li>
          <li ng-class="{ active: isActive('/your-first-visit') }">
            <a ui-sref="index.first-visit" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Your First Visit
            </a>
          </li>
          <li class="mobile-only" ng-class="{ active: isActive('/careers/openings') }">
            <a ui-sref="index.careers.current-openings" ng-click="navCollapsed=true" uib-dropdown-toggle>
              Careers
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

导航组件

angular
.module('common')
.component('nav', {
    templateUrl: './nav.html',
});

之前我创建了很多组件，所以这是一个罕见的问题。

Answer 1

事实证明，导航组件本身的名称与<nav> HTML标记发生冲突。您所要做的就是将其重命名为其他内容并解决问题（不要忘记您不能在名称中加上破折号（' - '），只有名称足够长时才能使用驼峰案例）

注意：

我首先尝试将其重命名为 navbar ，这也是模板中的HTML类，但这不会导致任何问题。这很奇怪，因为上面提到的类似问题说问题是与CSS类的碰撞，所以我不确定为什么HTML类是明确的而不是CSS类。

也许其他人可以在那里发声。

组件未呈现/显示

1 个答案: