解决

Question

我有几天以来的问题，我在互联网上搜索了很多，没有发现任何问题。我有这个表单与其他组件（如导航栏）显示。这太慢了我疯了。我复制并粘贴了官方angular.io guide的表格，但没有任何改进。然后我尝试显示它没有我的网站的其他组件，它的神奇表现很好。关键是我必须把它作为组件的一部分，或者至少是一个组件，但我显然需要通过 router-outlet 来实现它。

这是我的 app.component.html 的结构：

的 app.component.html

<app-navbar></app-navbar>
<app-item-form></app-item-form>

导航栏是普通导航栏，而 item-form.component.html 具有以下结构：

的 项-form.component.html

<div class="container">
    <div [hidden]="submitted">
        <h1>Form</h1>
        <form (ngSubmit)="onSubmit()" #itemForm="ngForm">
            <div class="form-group">
                <label for="it_name">Nome</label>
                <input type="text" class="form-control" id="it_name" required [(ngModel)]="it_name" name="it_name" #name="ngModel">
            </div>
                <button type="submit" class="btn btn-success" [disabled]="!itemForm.form.valid">Submit</button>
        </form>
    </div>
</div>

item-form.component.ts 只包含html中绑定的变量和布尔值，就像官方 angular.io 的例子一样引导。

Google Chrome的效果分析给了我this result，我不认为那些对map，DoJoin等函数的调用是正常的。如图所示，它们会减慢我的形态，我无法找到它们被调用的原因。

是的，我正在使用 angular2-jwt ，但为什么它会干扰表单？
该组件与该库没有依赖关系。如果我以这种方式编辑 app.component.html （例如：只留下表单），为什么会这样做：

<app-item-form></app-item-form>

一切顺利吗？我做错了什么？

提前致谢。

更新1

经过一些分析后，我注意到实际问题不是存在另一个组件，而是在我的导航栏中使用我的身份验证服务，该服务使用angular2-jwt令牌。这是 navbar.component.html ：

的相关代码

<ul class="nav navbar-nav navbar-right">
            <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/dashboard']">Dashboard</a></li>
            <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/profile']">Profile</a></li>

            <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/login']">Login</a></li>
            <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/register']">Register</a></li>
            <li *ngIf="authService.loggedIn()"><a (click)="onLogoutClick()" href="#">Logout</a></li>
          </ul>

其中authService.loggedIn（）是 auth.service.ts 中的一个函数：

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired } from 'angular2-jwt';

    @Injectable()
    export class AuthService {
      authToken: any;
      user: any;

      constructor(private http: Http) { }

      loggedIn() {
            return tokenNotExpired('id_token');
          }
    }

解决

问题在于* ngIf我放了一个函数，反对Angular2的最佳实践。因此每次在应用程序中发生某些事情时都会调用loggedIn（）函数。

当Angular2不是页面中唯一的组件时，它会变得太慢

更新1

解决

0 个答案: