Обмен данными между одним компонентом в другом компоненте в угловых 4

Question

Как изменить логическое значение с родительского component.ts на дочерний component.ts, который хочет показать и скрыть параметр входа и выхода из системы с помощью ngif, но не работает. Я не знаю, как установить и разделить логическое значение между двумя компонентами.Я использую templateUrl.

app.component.ts:

export class AppComponent { 
public isValid:boolean;
constructor(private router:Router){ 
} 
 logout(){
 localStorage.removeItem('email');
 this.router.navigate(['./login']);
 this.isValid=true; 
 } 
 }

login.component.ts

export class LoginComponent implements OnInit {
public username:string;
public password:string; 
constructor(private router:Router) { } 
ngOnInit() {
} 
userLogin(form:NgForm){ 
if(form.value.username==="admin@gmail.com" && form.value.password==="admin")
 {
  localStorage.setItem('email',form.value.username);
  this.router.navigate(['./php']);
  this.isValid=false;//not working//
} }  }

app.component.html

<ul class="nav navbar-nav navbar-right">
  <li *ngIf="isValid">
    <a [routerLink]="['/login']" >Login</a>
  </li>

  <li *ngIf="!isValid">
      <a (click)="logout()">LogOut</a>
    </li>

</ul>

Answer 1

Вы должны использовать @Input декоратор, код которого у вас почти подходит, просто добавьте следующее предложение [isValid]="isLoginValid" и @Input() isValid: any;

HTML-компонент приложения

<child-component [isValid]="isLoginValid"><child-component>

child.component.ts

Import {Input} from 'angular/core'

@Input() isValid: any;

....

Answer 2

При передаче данных между компонентами, которые не имеют прямого соединения, такими как братья и сестры, внуки и т. Д., Вы должны использовать общую службу.Вы можете использовать RXJS BehaviorSubject или Subject для межкомпонентной связи.
Subject vs BehaviorSubject

Создание службы

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

    @Injectable()
    export class SharedService {

      private valueSource = new BehaviorSubject<boolean>(false);
      currentValue = this.valueSource.asObservable();

      constructor() { }

     changeValue(value: boolean) {
        this.valueSource.next(value)
      }

    }

Регистрация службы с угловым модулем.

Зачем?Если мы хотим, чтобы экземпляр зависимости использовался глобально и совместно использовать state в приложении, мы настроим его на NgModule.

из Angular Docs

Поставщики угловых модулей (@NgModule.providers) зарегистрированы в корневом инжекторе приложения.Angular может внедрить соответствующие сервисы в любой класс, который он создает.После создания экземпляр службы живет в течение всего жизненного цикла приложения, и Angular внедряет этот один экземпляр службы в каждый класс, который в этом нуждается.

@NgModule({
      declarations: [
        AppComponent,


      ],
      imports: [

        BrowserModule,
        BrowserAnimationsModule,

      ],
      providers: [SharedService],
      bootstrap:[AppComponent],

Добавление службы SharedService в компоненты
app.component.ts:

export class AppComponent { 
public isValid:boolean;
constructor(private router:Router:private service:SharedService){ 
       this.service.currentValue.subscribe(message => this.isValid = message);//subscribe to the currentValue observable.
} 
 logout(){
 localStorage.removeItem('email');
 this.router.navigate(['./login']);
 this.isValid=true;
 } 

login.component.ts

export class LoginComponent implements OnInit {
public username:string;
public password:string; 
public isValid:boolean;
constructor(private router:Router,private service:SharedService) {}


ngOnInit() {
} 
userLogin(form:NgForm){ 
if(form.value.username==="admin@gmail.com" && form.value.password==="admin")
 {
  localStorage.setItem('email',form.value.username);
  this.router.navigate(['./php']);
  this.isValid=false;
  this.service.changeValue(this.isValid);//it calls next on the BehaviorSubject to change its value.
} }  }

Answer 3

Я не очень понимаю, для чего предназначен компонент входа, так как он нигде не используется в предоставленном коде.В любом случае, я бы настоятельно рекомендовал снова пройтись по основам.Вам нужно больше узнать о взаимодействии родительских и дочерних компонентов.Здесь вы можете найти учебник для этого: https://angular.io/guide/component-interaction