Angular 4(单击)仅在下拉列表中触发一次

时间:2018-03-19 13:10:59

标签: angular typescript

我遇到以下问题:

在我退出并再次使用我的angular-app后,Logout-Button停止工作。 (点击)事件不会开火直到我用F5刷新网站。

navbar.component.html

//In Navbar
<mz-navbar-item-container [align]="'right'">
  <a *ngIf="auth" id="btn-dropdown-demo" class="waves-effect waves-light" href="#">Menu▾</a>
</mz-navbar-item-container>
[....]
//After Navbar
<mz-dropdown *ngIf="auth"
         [id]="'dropdown-demo'"
         [align]="'right'"
         [belowOrigin]="true"
         [constrainWidth]="false"
         [dropdownButtonId]="'btn-dropdown-demo'"
         [inDuration]="300"
         [outDuration]="300"
         [stopPropagation]="true">
  <mz-dropdown-item><a href="#!">Profile</a></mz-dropdown-item>
  <mz-dropdown-item><a href="#!">Settings</a></mz-dropdown-item>
  <mz-dropdown-divider></mz-dropdown-divider>
  <mz-dropdown-item><a (click)='goTo("logout")'>Logout</a></mz-dropdown-item>
</mz-dropdown>

navbar.component.ts

export class NavBarComponent implements OnInit, OnDestroy {
  private auth: boolean; //is true/false and will be refreshed if user do a login/logout
  private sharedSub: Subscription;

  constructor(private sharedService: SharedService, private router: RoutingService) { }

  ngOnInit() {
    this.sharedSub = this.sharedService.getLoggedIn().subscribe(isLoggedIn => {this.auth = isLoggedIn; });
    this.sharedService.refreshLogin();
  }

  ngOnDestroy() {
    this.sharedSub.unsubscribe();
  }

  private goTo(site: string) {
    this.router.navigateTo(site);
  }
}

在注销时,用户令牌将被删除,应用程序将路由到/ login(无需重新加载navbar.component) 你有什么想法可能是我的错误吗? 提前谢谢!

1 个答案:

答案 0 :(得分:0)

我没有使用ng2-materialize的经验,但将angular-click-directive置于HTML a-tag中似乎是错误的。

<android.support.v7.widget.CardView
            android:foreground="?android:attr/selectableItemBackground"
            android:clickable="true"
            android:layout_width="160dp"
            android:layout_height="190dp"
            android:layout_margin="10dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center">
                <ImageView
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:background="@drawable/circlebackgroundpurple"
                    android:src="@drawable/ic_account_balance_black_24dp"
                    android:padding="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:layout_marginTop="10dp"
                    android:text="Admitere"
                    android:textAlignment="center"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/lightgray"
                    android:layout_margin="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Conditii admitere specializarea IE"
                    android:padding="5dp"
                    android:textColor="@android:color/darker_gray"/>

            </LinearLayout>

也许这就是为什么框架在后台崩溃,只有F5重置才能解决这个问题。

我会尝试实现一个按钮元素。但这只是一个简单的问题:

<mz-dropdown-item><a (click)='goTo("logout")'>Logout</a></mz-dropdown-item>
相关问题