Angular 内置指令不适用于 Foundation 组件

Question

我使用了很多基础组件，例如 modal 、 accordian 等等。在我的 html 和 angular 中，这些工作正常，但是一旦我使用来自此类 *ngIf 或 *ngFor 的内置指令，这些基础组件就会完全停止工作。示例如下。

 <p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
  <h2 class="text-center">Lorem Ipsum</h2>
  <div *ngif="name === 'John'" class="reveal" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <p class="lead">Your couch. It is mine.</p>
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
 </div>

这个模态不起作用，但是当我删除 *ngIf 时它运行良好。这种行为的原因是什么？

此代码是主要问题所在。当我决定用真实数据引入结构指令时，它就不起作用了。

<div class="app-dashboard-sidebar-inner">
    <div>{{topLabel}}</div>
    <ul class="vertical menu accordion-menu" data-accordion-menu>
    <ng-template ngFor let-asideItem [ngForOf]="asideItems">
      <li>
          <a [routerLinkActive]="['active']" href="#">
            <i class="{{asideItem.icon}}"></i>
            <span class="app-dashboard-sidebar-text">{{asideItem.name}}</span>
          </a>
          <ng-template [ngIf]="asideItem.type === 'sub'">
            <ul class="menu vertial nested">
            <ng-template ngFor let-asideChildren [ngForOf]="asideItem.children">
                <li>
                    <span class="app-dashboard-sidebar-text">{{asideChildren.name}}</span>
                </li>
            </ng-template>
          </ul>
          </ng-template>
      </li>
     </ng-template>
    </ul>
  </div>

所有信息都正确显示，但下拉手风琴不起作用

Answer 1

只需在 ng-template 中使用结构指令。

示例：

<ng-template *ngif="name === 'John'">
<div class="reveal" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <p class="lead">Your couch. It is mine.</p>
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
 </div>
</ng-template>

Answer 2

它不起作用的原因是 ngIf 在条件为 false 时不会创建 DOM(id='exampleModal1')，所以data-open="exampleModal1" 找不到目标 DOM

你可以用hidden代替ngIf，我改了这个：

在[hidden]

ngIf

<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
  <h2 class="text-center">Lorem Ipsum</h2>
  <div [hidden]="name !== 'John'" class="reveal" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <p class="lead">Your couch. It is mine.</p>
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
 </div>

Answer 3

我能够让它工作，对于任何可能遇到同样问题的人来说，对我有用的解决方案是在 ngAfterViewInit

中调用 $(document).foundation();

ngAfterViewInit(): void {
$(document).foundation();

}

Angular 内置指令不适用于 Foundation 组件

Angular built-in-direcitives not working with Foundation components

html

zurb-foundation

angular-directive

angular