从一个组件到另一个组件调用函数以更新按钮 [英] Call function from one component to another to update the button

问题描述

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的 changeState 隐藏 Sign在导航栏中的按钮中.我正在为分配给* ngIf的 hideCourse 属性获取正确的值，但是它并没有根据需要更新视图.

I have above components in my Angular 2 website,where I'm calling callMethod where I do certains things and then calling topnavComponent's changeState to hide the Sign In button from navigation bar. I'm getting the correct value for hideCourse property which is assigned to *ngIf, but it's not updating the view as wanted.

任何人都可以告诉我针对我的情况的解决方案.

Can anyone tell me a solution for my scenario.

谢谢.

推荐答案

有很多选项可以传达两个组件.使用服务，我们可以订阅Observable或简单地使用getter.这种方式对单独组件的哲学"更为自在.您的组件不需要了解其他组件

There are many options to communicate two components. Using a service we can subscribe to a Observable or simply use a getter. this aproach it's more confortable with the "philosophy" of separate component. Your components don't need know about the other one

服务

@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() { }
}

component-uno

component-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
  }
}

组件剂量

@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() { }
}

这篇关于从一个组件到另一个组件调用函数以更新按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！