Question

我知道这个问题与组件交互有关，谷歌搜索但我没有得到我所缺少的东西。

我想检查app.component.html中的属性值在我的角度应用中，

我有登录组件，它从用户输入输入值，如user_name和密码。一旦用户获得经过身份验证，路由器就会绘制相应的布局。

我的尝试，

app.component.html（方法1）

<app-applayoutmodel></app-applayoutmodel>
<div class="container">
<router-outlet></router-outlet>
</div>

app-applayoutmodel此组件包括侧面导航和工具栏布局和路由器插座负责相应的布局点击侧导航中的导航项目。

但我想改变html如下，（方法2）

<div *ngIf="user_name !== undefined">
<app-applayoutmodel></app-applayoutmodel>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>

这里是user_name我想在用户在表单中输入并提交表单后从登录组件中获取值。

app.component.ts

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

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

和login.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { User } from '../models/user';
import { LoginService } from '../../../serviceProviders/loginservice';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { AppComponent } from '../../app.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  user_name: string;
  password: string;
  public user: User;
  private errorMsg: string;


  constructor(private loginService: LoginService,
    private router: Router,
    public dialog: MatDialog) { }

  ngOnInit() {
  }

  userLogin() {
    console.log(this.user_name);
    this.loginService.signIn(this.user_name, this.password)
    .subscribe(
      data => {
        this.user = data;
        this.router.navigate(['/applayout']); },
      err  => {
        const dialogRef = this.dialog.open(DialogOverview, {
          width: '400px'
        });
        dialogRef.afterClosed().subscribe(result => {
          this.router.navigate(['/login']);
         // this.animal = result;
        });
        this.errorMsg = err;
      }
  );
  }
}
}

和login.component.html

<div class="firstDiv"></div>
<div class="secondDiv"></div>
<div class="loginDiv">
  <form>
    <div class="row center">
      <i class="fa fa-user-circle"></i>
    </div>
    <div class="container">
      <input type="text" matInput placeholder="Username" type="text" name="username"  [(ngModel)]="user_name">
      <input type="password"  matInput placeholder="Password" name="password"  [(ngModel)]="password">
      <br/>
      <br/>
      <button mat-button (click)="userLogin()">Login</button>
      <br/>
      <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
    </div>
  </form>
</div>

如果我在打开login.component时选择方法1，则视图仅显示到工具栏的高度，如下所示，

由此，我无法继续登录。

我认为解决方案正在使用方法2，因为最初在加载应用时，app.component.html中未定义user_name，并且 app-applayoutmodel 不会显示，可以继续登录。

请帮助我，如果正确的话，如何进行上述方法2.

这是路由器路径，

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'applayout', component: AppComponent}
];

Answer 1

编辑 - 使用PARAMS的新手
更好的解决方案是不将用户名作为查询参数，而是将其作为路由参数。

要实现这一目标，您必须设置app.routes.ts：

export const mainRoutes: Routes = [
  { path: '', component: LogInComponent },
  { path: '/:userName', component: MainComponentAfterLogged }
];

用户填写表格后，您可以：

constructor(private _router: Router) {}

... inside method
this._router.navigate(['this.userName]);

对于您的主要组件，必须接收用户名的那个：

constructor(private _route: ActivatedRoute) {}

ngOnInit() {
    this._route.params.subscribe(
      params => this.userName = params['userName']
);

不太好用查询参数

一种可能的解决方案是将用户名放在您的URL中，并订阅您的应用程序阵营内的路由更改。我认为这是解决问题的好方法，因为当您更改路线时，app.component会更新。

您可以参考this stackoverflow应答来正确路由。就像（在您的登录组件中）：

import {Router} from '@angular/router';

userName: string;

constructor(private _router: Router) {}

// ... somewhere inside a method
this._router.navigate([ '', { name: userName } ]);

要在app.component.ts：

内订阅路线更改

// Imports needed
import {ActivatedRoute} from '@angular/router';

private sub: any;
userName: string = '';

constructor(private _router: ActivatedRoute) {}

ngOnInit() {
  // Subscribe to active route changes
  this.sub = this.route.params.subscribe(params => {
    // Get the content of param 'name' everytime it changes
    this.userName = params['name'];
    // call a method or so to do something with that information
  });
}

在app.component

1 个答案: