Question

我有一个父组件，它包含多个子组件，您可以通过菜单导航到这些组件。我希望在用户尚未登录时禁用该菜单中的按钮。

登录组件是主应用程序组件的子组件，因此它使用事件发射器告诉主应用程序组件登录是否成功。但是，当我运行应用程序时，我得到一个错误说明：

ERROR TypeError: data.split is not a function

它还给我一个编译器错误，如下所示：

ERROR in src/app/app/login/login.component.ts(14,3): error TS1240: Unable to resolve signature of property decorator when called as an expression.

这是我的主应用程序（模板+组件）

<header class="page-header">
  <h1>{{title}}</h1>
  <nav>
    <ul class="nav nav-pills">
      <li role="presentation" [routerLinkActive]="['active']">
        <a [routerLink]="['/login']">Login</a>
      </li>
      <li role="presentation" [routerLinkActive]="routerLinkActiveIsEnabled" (change) = "makeActive($event)">
        <a [routerLink]="['/account/create']">Account aanmaken</a>
      </li>
      <li role="presentation" [routerLinkActive]="routerLinkActiveIsEnabled" (change) = "makeActive($event)">
        <a [routerLink]="['/account/list']">Account overzicht</a>
      </li>
      <li role="presentation" [routerLinkActive]="routerLinkActiveIsEnabled" (change) = "makeActive($event)">
        <a [routerLink]="['/leave/create']">Verlofuren aanvragen</a>
      </li>
      <li role="presentation" [routerLinkActive]="routerLinkActiveIsEnabled" (change) = "makeActive($event)">
        <a [routerLink]="['/leave/list']">Verlofuren overzicht</a>
      </li>
      <li role="presentation" [routerLinkActive]="routerLinkActiveIsEnabled" (change) = "makeActive($event)">
        <a [routerLink]="['/leave/pending']">Verlofaanvragen overzicht</a>
      </li>
    </ul>
  </nav>
</header>
<div class="alert alert-info" role="alert">Berichten&hellip;</div>
<router-outlet></router-outlet>

主要应用组件

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string;
  routerLinkActiveIsEnabled: boolean = false;

  constructor() {
    this.title = "Verlofurenregistratie";
  }

  makeActive(event){
    this.routerLinkActiveIsEnabled = event
  }
}

这是登录子组件：

模板

<h2>{{title}}</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="email">E-mailadres</label>
    <input type="email" id="email" class="form-control"
           placeholder="naam@mail.nl"
           formControlName="email">
  </div>
  <div class="form-group">
    <label for="password">Wachtwoord</label>
    <input type="password" id="password" class="form-control"
           formControlName="password">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Inloggen</button>
  </div>
</form>

成分：

import {Component, EventEmitter, Output} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {AccountService} from "../account/account.service";
import {Router} from "@angular/router";


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AccountService]
})
export class LoginComponent {
  @Output onLoginSuccessful = new EventEmitter<boolean>();
  title: string;
  loginForm: FormGroup;
  loading = false;
  error = '';
  constructor(private fb: FormBuilder,
              private accountService: AccountService,
              private router: Router) {
    this.title = "Inloggen";
    this.loginForm = fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    const formModel = this.loginForm.value;
    this.accountService.authenticate(formModel.email, formModel.password).then(account =>
    {console.log(account.id + " " + account.password + " " + " " + account.username + " "  + account.person + " ")
        if (account !== undefined) {
      this.onLoginSuccessful.emit(true)
      localStorage.setItem("account", JSON.stringify(account))
        this.router.navigate(["account/update", account.id])
      }
    });
  }
}

谁能告诉我我做错了什么？谢谢

编辑：我通过为输出提供别名来解决编译器问题。

Answer 1

您使用RouterLinkActive指令错误。它在活动路由元素上设置css类。因此，您不需要组件上的额外属性来跟踪活动路由。您只为元素准备了样式。

请参阅RouterLinkActive的文档。

成功登录后如何激活[routerLinkActive]？

1 个答案: