Как передать данные от ребенка к родителю, используя routeLink в angular 6 - PullRequest
Новая
       27

Как передать данные от ребенка к родителю, используя routeLink в angular 6

0 голосов
/ 07 июня 2019

У меня есть вопрос о передаче данных от дочернего к родительскому и маршрутизации на родительскую страницу без перезагрузки.

first.component.ts 

@Component({    
  selector: 'app-first',    
  templateUrl: './first.component.html'   
})    
export class FirstComponent implements OnInit {    

  private test: any;
  private data: any;
  constructor(    
    private eventEmitterService: EventEmitterService    
  ) { }    

  ngOnInit() {  
    if (this.eventEmitterService.subsVar==undefined) {    
      this.eventEmitterService.subsVar = this.eventEmitterService.    
      invokeFirstComponentFunction.subscribe((name:string) => {    
        this.firstFunction(name);    
      });    
    }    
  }    

  firstFunction(name: string) {
    alert( 'Hello ' + '\nWelcome to C# Corner \nFunction in First Component');    
  }

first.component.html 

<a routerLink="second">Second Component</a>

second.component.ts 

@Component({    
  selector: 'app-second',    
  templateUrl: './second.component.html'   
})    
export class SecondComponent implements OnInit {    

    @Input() count: number; 

    @Output() countChange = new EventEmitter(); 

  constructor(    
    private eventEmitterService: EventEmitterService, private router: Router) { }    

  ngOnInit() { 

  }    

  firstComponentFunction(name:string){    
    this.eventEmitterService.onFirstComponentButtonClick("Hello Data From Second Component");    

  }    
}

second.component.html 

  <input type="button" value="Call First Component Function" (click)="firstComponentFunction($event)" routerLink="first">

event-emitter.service.ts 

@Injectable({    
  providedIn: 'root'    
})    
export class EventEmitterService {   

  private data: any;

  invokeFirstComponentFunction = new EventEmitter();    
  subsVar: Subscription;    

  constructor() { }    

  onFirstComponentButtonClick(data) {    
    this.invokeFirstComponentFunction.emit(data);    
  }    
}

В этом случае, когда я добавляю источник событий, он отлично передает данные первому компоненту, но я хочу направить на первую страницу с данными, отправленными событиями, но не перезагружать всю страницу снова.Здесь, в second.component.html, я использую routerLink после действия генератора событий, но он очищает мои данные, отправленные событиями, и снова загружает страницу.

...