使用 Angular 4 中的语义 UI 下拉菜单“元素不再附加到 DOM”答案

【问题标题】："Element is no longer attached to DOM" using Semantic UI dropdown in Angular 4使用 Angular 4 中的语义 UI 下拉菜单“元素不再附加到 DOM”
【发布时间】：2017-11-10 19:39:25
【问题描述】：

我已经使用 Angular 组件中的下拉菜单实现了一个菜单。退出下拉项是一个路由器链接，因此单击它会导致重定向到另一个组件。当我这样做时，它返回以下错误：

过渡：元素不再附加到 DOM。无法动画。在生产中使用静默设置来消除此警告。滑下来

看起来是这样的：

这是代码

<div class="ui right icon dropdown item">
    <img class="ui avatar image" src="../assets/avatar/man-1.svg">
    {{ user.displayName | truncate:18 }}
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <div class="divider"></div>
        <a class="item" [routerLink]="['/auth/signin']"><i class="sign out icon"></i> Sign out</a>
    </div>
</div>

这里是组件打字稿代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './Auth/auth.service';
import { environment } from '../environments/environment';

declare let $: any;

@Component({
  selector: 'mvd-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit{

  constructor(private http: HttpClient, private auth: AuthService) {}

  ngOnInit() {
    /* Initialize the dropdown user menu */
    $('.ui.dropdown').dropdown();
  }

  get user() {
    return this.auth.currentUser;
  }

}

重定向后，每次点击页面都会导致此错误。我注意到至少在下拉菜单上导致滑出动画一次（例如单击编辑配置文件）可以解决此问题，并且错误消失了。

【问题讨论】：

能显示对应的角码吗？
更新了组件 .ts 文件。我认为没有其他有价值的代码。奇怪的是，一切正常，但控制台返回该错误！

标签： angular transition dropdown semantic-ui

【解决方案1】：

theme.config 文件（在文件夹 /src 中）中的转换属性是如何设置的？

如果还没有，请尝试将其更改为默认值：

@transition : 'default';

【讨论】：