Question

AuthComponent

    import { TopnavComponent } from './../topnav/topnav.component';
    import { Component, OnInit,ViewContainerRef } from '@angular/core';
    import {AuthService} from "./auth.service";
    import { NgForm } from '@angular/forms';
    import {Router} from "@angular/router";
    import {Profile} from "./auth.model";
    import {Http,Request,Response,Headers, RequestOptions} from "@angular/http";
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Observable } from 'rxjs';

    @Component({
        selector: 'app-auth',
        templateUrl: './auth.component.html',
        styleUrls: ['./auth.component.css'],
        providers:[TopnavComponent]
    })
    export class AuthComponent implements OnInit {
    constructor(private authUser: AuthService, private router: Router,public topnav:TopnavComponent) {};
    callMethod() {

           document.cookie = 'uid='+ this.isAuthSuccess.profile[0].guProfileId;
                    document.cookie = 'isInstructor='+ this.isAuthSuccess.profile[0].isInstructor;
                    document.cookie = 'isStudent='+ this.isAuthSuccess.profile[0].isStudent;
                    this.topnav.changeState();
                    this.router.navigateByUrl('/home');
            });
        }
    }

TopnavComponent

import { Component, OnInit } from '@angular/core';
import {Http,Request,Response,Headers, RequestOptions} from "@angular/http";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Router, ActivatedRoute} from "@angular/router";
import { Observable } from 'rxjs';
import {AuthService} from "../auth/auth.service"

@Component({
    selector: 'app-topnav',
    templateUrl: './topnav.component.html',
    styleUrls: ['./topnav.component.css']
})
export class TopnavComponent implements OnInit {
    hideCourse=false;
    constructor(private router: Router,private auth:AuthService) { }
    changeState(){
        this.hideCourse=!this.hideCourse;
    }
}

TopnavComponent.html

<button (click)="callMethod()">Submit</button>
<ul class="navbar-nav mr-auto" *ngIf="hideCourse">
    <li class="nav-item dropdown">
        <a class="nav-link" routerLink="/auth">Sign In</a>
    </li>
</ul>

我在Angular 2网站上有以上组件，我在那里打电话给 callMethod ，我确定了事情，然后调用topnavComponent＆＃39; s changeState 隐藏导航栏中的登录按钮。我为 hideCourse 属性获取了正确的值，该属性已分配给* ngIf，但未按要求更新视图。

任何人都可以告诉我一个解决方案。

感谢。

Answer 1

我不会试图理解你的代码，只是给你代码将组件实例注入另一个组件（记得导入未知的关键字）。

constructor(
  @Inject(forwardRef(() => TopnavComponent)) private topnav: TopnavComponent
)

现在你可以使用

this.topnav.changeState();

Answer 2

有两种方法可以传达两个组件。使用服务我们可以订阅Observable或只使用getter。这种方法与单独组件的“哲学”相比更加舒适。您的组件不需要了解另一个组件

服务

@Injectable()
export class UtilCommonService {

  sharedData:any;  //<--a public variable that can be changed
  private dataSource = new Subject<any>();
  data = this.dataSource.asObservable();  //<--an Observable
  change(param:any) {   //<--function to force a change
     this.dataSource.next(param)
  }
  constructor() { }
}

组件的UNO

@Component({
  selector: 'app-app-uno',
  template:`<button (click)="buttonClick()">Push me</button>`
})
export class AppUnoComponent implements OnInit {

  constructor(private utilCommonService:UtilCommonService) { }

  ngOnInit() {
  }
  buttonClick()
  {
    this.utilCommonService.change("Hola mundo"); //<--call to change of the service
    this.utilCommonService.sharedData="Adios mundo"; //<--simply change the value of the variable
  }
}

组件dos

@Component({
  selector: 'app-app-dos',
  template:`<p>Data:{{data}}</p>
  <p>Shared Data:{{sharedData}}</p>`
})
export class AppDosComponent implements OnInit {

  constructor(private utilCommonService: UtilCommonService) { }
  data:any;
  get sharedData() //<--a getter
  {
    return this.utilCommonService.sharedData;
  }
  ngOnInit() {
    this.utilCommonService.data.subscribe((param: any) => { //<--subscribe to an observable
      this.data=param;
    });
  }
}

AppMain

@Component({
  selector: 'app-app-main',
  template:`<app-app-uno></app-app-uno>
  <app-app-dos></app-app-dos>`
})
export class AppMainComponent{
  constructor() { }
}

从一个组件调用功能到另一个组件以更新按钮

2 个答案: