한 구성 요소에서 다른 구성 요소로 변수를 전달하고 두 번째 구성 요소 템플릿 HTML 파일에서 해당 변수를 인쇄하는 방법은 무엇입니까?

Question

로그인 한 사용자의 그룹 목록이있는 대시 보드가 있습니다. 이제 사용자가 그룹을 클릭하면 이름, 설명 등의 그룹 기본 정보가 페이지 오른쪽에 인쇄됩니다.이 내용은 다음과 같습니다.

HomeComponent는 GroupComponent를라는 하위 구성 요소가 있습니다. 그룹 개체를 HomeComponent에서 GroupComponent로 전달하여 GroupComponent의 이름을 인쇄하려고합니다. 아래는 내가 시도 코드 :

routes.ts

export const routes: Routes = [ 
    {path: '', redirectTo: 'home', pathMatch: 'full'}, 
    {path: 'login', component: LoginComponent}, 
    { 
    path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
    children: [ 
     {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, 
     {path: 'group', component: GroupComponent}, 
     {path: 'dashboard', component: DashboardComponent} 
    ] 
    } 
]; 

home.component.ts

export class HomeComponent implements OnInit { 
    user: string; 
    user_id: number; 
    group_list: string[]; 

    constructor(public router: Router, private _groupService: GroupService) { 
    // xyz code 
    } 

    ngOnInit() { 
    } 

    getUserGroups() { 
    let body: string = '{}'; 
    this._groupService.getAllUserGroups(body).subscribe(
     auth => { 
     let payload = auth.json(); 
     this.group_list = payload.list; 
     }, 
     error => { 
     console.log(error); 
     } 
    ); 
    } 

    goToGroupDetail(group) { 
    console.log(group.id); 
    let groupObj = new GroupComponent(group.name); 
    this.router.navigate(['/home/group']); 
    } 

} 

home.component.html는

<ul class="nav navbar-nav navbar-right"> 
      <li *ngFor="let group of group_list"><a (click)="goToGroupDetail(group);">{{group.name}}</a></li> 
      </ul> 

group.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'app-group', 
    templateUrl: './group.component.html', 
    styleUrls: ['./group.component.css'] 
}) 
export class GroupComponent implements OnInit { 
    group_name:string; 

    getGroupName(): string { 
    return this.group_name; 
    } 

    setGroupName(value){ 
    this.group_name = value; 
    } 

    constructor(name:string) { 
    this.setGroupName(name); 
    } 
    ngOnInit() { 
    } 

} 

group.component.html

<p> 
    group works! 
</p> 
<div class="col-md-6"> 
    <h2>Name of the Group : {{group_name}}</h2> 
</div> 

내가 이런 종류의 오류가 무엇입니까 :

Answer 1

당신은 할 수없는 것을 시도하고 있습니다 ... 다음 라인을 의미합니다 : let groupObj = new GroupComponent(group.name); 그리고 생성자에 주입 된 값을 얻을 수 있어야합니다.

여기에서 구성 요소간에 데이터를 공유하는 가장 일반적인 시나리오는 공유 서비스를 사용하는 것입니다.

Sp 공유 서비스를 BehaviorSubject과 함께 사용 라우팅하기 전에 그룹을 설정 한 다음 GroupComponent에 제목을 등록하십시오.당신의 GroupComponent 당신이 구독 할 수 있습니다에서 다음

goToGroupDetail(group) { 
    console.log(group.id); 
    this._groupService.emitGroup(group); // here 
    this.router.navigate(['/home/group']); 
} 

그리고 :

import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

private group = new BehaviorSubject<string>(null); 

group$ = this.group.asObservable(); 

emitGroup(group: string) { 
    this.group.next(group); 
} 

과의

이 HomeComponent 서비스에 그룹을 전달합니다 BehaviorSubject를 가져오고 다음을 선언하여 GroupService에서

, 이 생성자에서 :

constructor(private _groupService: GroupService) { 
    _groupService.group$.subscribe(group => { 
    this.group_name = group; // assign value here 
    }); 
} 

official docs의 공유 서비스에 대해 자세히 알아보십시오.

Answer 2

당신은 두 가지 옵션이를 중 navparams 또는 @ViewChild를 사용할 수 있습니다. 그것은 정말로 당신의 요구 사항에 달려 있습니다.

귀하의 경우에는 간단한 navparams를 제안 할 것입니다. 도움이 될 the link입니다. 그래도 솔루션을 찾을 수 없으면 내가 도와 줄 것입니다.