Получение значения свойства в app.component

Question

Я знаю, что этот вопрос связан с взаимодействием компонентов, поиск в Google, но я не понимаю, чего мне не хватает.

Я хочу проверить значение свойства внутри app.component.html В моем угловом приложении

У меня есть компонент входа, который принимает входные данные от пользователя, такие как имя_пользователя и пароль. Как только пользователь проходит аутентификацию, маршрутизатор рисует соответствующий макет.

Моя попытка,

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 я хочу получить значение из компонента Login, как только пользователь введет форму и отправит форму.

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>

Если я выберу метод 1 при открытии login.component, представление будет отображаться только до высоты панели инструментов, как показано ниже,

Из-за этого я не могу войти в систему.

Я думаю, что Solution использует метод 2, потому что изначально, когда приложение загружается, имя пользователя не определено в app.component.html, а app-applayoutmodel не отображается и может продолжить вход в систему.

Пожалуйста, помогите мне, как сделать описанный выше способ 2, если он правильный.

и вот пути маршрутизатора,

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

Answer 1

РЕДАКТИРОВАТЬ - НОВЫЙ, КОТОРЫЙ ИСПОЛЬЗУЕТ ПАРАМЫ
Лучшее решение - не указывать имя пользователя в качестве параметра запроса, а указывать его в качестве параметра маршрута.

Для достижения этой цели вы должны установить 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 всегда будет обновляться при изменении маршрута.

Вы можете сослаться на этот ответ 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
  });
}