Как заставить один компонентный метод вызывать другой компонент? - PullRequest
Новая
       10

Как заставить один компонентный метод вызывать другой компонент?

0 голосов
/ 28 августа 2018

signin.component.ts (дочерний компонент) 

import { Component, OnInit,Input } from '@angular/core';
import { AfterViewInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { Data, AppService } from '../../app.service';
import { emailValidator, matchingPasswords } from '../../theme/utils/app-validators';
import { TopMenuComponent } from '../../theme/components/top-menu/top-menu.component';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent implements OnInit,AfterViewInit {
  loginForm: FormGroup;
  registerForm: FormGroup;
  @ViewChild(TopMenuComponent) top !: TopMenuComponent;
  @Input() hero: TopMenuComponent;

  constructor(public formBuilder: FormBuilder, public router:Router, public snackBar: MatSnackBar,private appservie:AppService)
   {
     localStorage.clear()
    }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      'email': ['', Validators.compose([Validators.required, emailValidator])],
      'password': ['', Validators.compose([Validators.required, Validators.minLength(6)])] 
    });

    this.registerForm = this.formBuilder.group({
      'name': ['', Validators.compose([Validators.required, Validators.minLength(3)])],
      'email': ['', Validators.compose([Validators.required, emailValidator])],
      'password': ['', Validators.required],
      'confirmPassword': ['', Validators.required]
    },{validator: matchingPasswords('password', 'confirmPassword')});

  }

  public onLoginFormSubmit(values:Object):void {
    console.log(values)
    this.appservie.loginuser(JSON.stringify(values)).subscribe(response =>{
      var data = response
      console.log(data)
      console.log(data['user']['username'])
      localStorage.setItem('username',data['user']['username'])
      console.log(this.hero.Message)
    })
    if (this.loginForm.valid) {
      this.router.navigate(['']);

    }
  }

  public onRegisterFormSubmit(values:Object):void {
    if (this.registerForm.valid) {
      this.snackBar.open('You registered successfully!', '×', { panelClass: 'success', verticalPosition: 'top', duration: 3000 });
    }
  }
  ngAfterViewInit() 
  {

  }

}

topmenucomponet.ts (родительский компонент) 

import { Component, OnInit, Input } from '@angular/core';
import { Data, AppService } from '../../../app.service';

@Component({
  selector: 'app-top-menu',
  templateUrl: './top-menu.component.html'
})
export class TopMenuComponent implements OnInit {
  public currencies = ['USD', 'EUR'];
  public currency:any;
  public flags = [
    { name:'English', image: 'assets/images/flags/gb.svg' },
    { name:'German', image: 'assets/images/flags/de.svg' },
    { name:'French', image: 'assets/images/flags/fr.svg' },
    { name:'Russian', image: 'assets/images/flags/ru.svg' },
    { name:'Turkish', image: 'assets/images/flags/tr.svg' }
  ]
  public flag:any;

  data:any;
  public Message="hai"
  constructor(public appService:AppService) 
  {
   this.data = localStorage.getItem('username')

  }

  ngOnInit() {
    this.currency = this.currencies[0];
    this.flag = this.flags[0];    
  }

  public changeCurrency(currency){
    this.currency = currency;
  }

  public changeLang(flag){
    this.flag = flag;
  }

   value()
  {
    return 'hai'
  }
}

Я пытался, но это не работает. Я хочу получить доступ в (topmenu.component.ts) сообщении в (sigin.component.ts). Можете ли вы дать какие-либо предложения, как получить доступ к одному компоненту и другому значению или методу компонента? Я использую различные концепции viewchild и ввода, но он не работает, показывает ошибку, поскольку не может прочитать значение сообщения свойства.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Вы можете напрямую получить доступ к свойству, используя экземпляр компонента, не делая ViewChild

вот пример 

import { Component, OnInit,Input } from '@angular/core';
import { AfterViewInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { Data, AppService } from '../../app.service';
import { emailValidator, matchingPasswords } from '../../theme/utils/app-validators';
import { TopMenuComponent } from '../../theme/components/top-menu/top-menu.component';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.scss'],
  providers: [TopMenuComponent]
})
export class SignInComponent implements OnInit,AfterViewInit {
  loginForm: FormGroup;
  registerForm: FormGroup;

  constructor(public formBuilder: FormBuilder, public router:Router, public snackBar: MatSnackBar,private appservie:AppService, private topMenu: TopMenuComponent)
   {
     localStorage.clear()
    }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      'email': ['', Validators.compose([Validators.required, emailValidator])],
      'password': ['', Validators.compose([Validators.required, Validators.minLength(6)])] 
    });

    this.registerForm = this.formBuilder.group({
      'name': ['', Validators.compose([Validators.required, Validators.minLength(3)])],
      'email': ['', Validators.compose([Validators.required, emailValidator])],
      'password': ['', Validators.required],
      'confirmPassword': ['', Validators.required]
    },{validator: matchingPasswords('password', 'confirmPassword')});

  }

  public onLoginFormSubmit(values:Object):void {
    console.log(values)
    this.appservie.loginuser(JSON.stringify(values)).subscribe(response =>{
      var data = response
      console.log(data)
      console.log(data['user']['username'])
      localStorage.setItem('username',data['user']['username'])
      console.log(this.topMenu.Message);
    })
    if (this.loginForm.valid) {
      this.router.navigate(['']);

    }
  }

  public onRegisterFormSubmit(values:Object):void {
    if (this.registerForm.valid) {
      this.snackBar.open('You registered successfully!', '×', { panelClass: 'success', verticalPosition: 'top', duration: 3000 });
    }
  }

}

я обновил конструктор и onLoginFormSubmit () метод

0 голосов
/ 28 августа 2018

Поведение импорта файла служебного файла внутри приложения из rxjs 

 import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Затем определите BehaviorSubject 

formValue= new BehaviorSubject({'username':''});

используйте следующий метод для обмена данными между компонентами

Родительский компонент 

 public onLoginFormSubmit(values:Object):void {
    console.log(values)
    this.appservie.loginuser(JSON.stringify(values)).subscribe(response =>{
      var data = response
      console.log(data)
      console.log(data['user']['username'])
  if(data['user']['username']){
   this.formValue.next({'username':data['user']['username']});
  }
    })

Подписаться на данные в дочернем компоненте

Дочерний компонент 

constructor(private appService:AppService) 
  {
  }

  ngOnInit() {
    this.appService.formValue.subscribe((data)=>{
      this.data = data;
  })
    this.currency = this.currencies[0];
    this.flag = this.flags[0];    
  }
...