응용 프로그램 구성 요소의 각도 4 - 호출 하위 구성 요소 메서드

Question

간단히 말해서 Angular 4 응용 프로그램이 있습니다.이 구성 요소에는 안드로이드 영감 부동 동작 단추가 포함되어 있습니다.이 단추를 클릭하면 현재 활성 구성 요소에 대한 메서드가 실행됩니다 (기본적으로 페이지 내용). 그 차이를 만드는 경우 각도 4 라우터를 사용하고 있습니다. 어떤 구성 요소가 현재 활성화되어 있는지 항상 알 수 없기 때문에 View Child 방식에 대한 일부 우려가 제기되었습니다. 가능하다면 모든 사용자에게 #binding 특성을 추가하는 것을 피하고 싶습니다. 단일 템플릿.

저는 ViewChild 데코레이터, ContentChild 데코레이터, 이벤트, 서비스를 통해 이것을 시도했습니다. 지금까지 절대적으로 은 아무것도 없었습니다.이 효과가 있었고 저는 막혔습니다. 이 시점에서 이것이 진정으로 복잡한 지 아니면 단지 PEBCAK인지는 확실치 않습니다.

문제의 버튼을 app.component 내에 포함되어 있습니다 - 여기에 일반적인 생각은

<div class="fab-container"> 
    <button class="btn btn-warning btn-fab" (click)="fabAction()"> 
    + 
    </button> 

app.component.ts

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 

export class AppComponent { 
    currentUrl: string = null; 

    constructor(private router: Router, private currentRoute: ActivatedRoute) {} 

    ngOnInit() { 
    this.router.events.subscribe((val) => { 
     this.currentUrl = this.router.url; 
    }); 
    } 
} 

app.component.html (간결에 딱 버튼)이 버튼이 때 클릭하면 하위 구성 요소에 fabAction() 메서드가 실행됩니다.

@Component({ 
    selector: 'app-course-list', 
    templateUrl: './course-list.component.html', 
    styleUrls: ['./course-list.component.scss'] 
}) 
export class CourseListComponent implements OnInit { 

    courses: Course[]; 
    showFilter: boolean = false; 

    constructor(
    private courseService: CourseService 
) { } 

    ngOnInit(): void { 
    this.getCourses(); 
    } 

    getCourses(): void { 
    this.courseService.getCourses().then(courses => this.courses = courses); 
    } 

    // Should execute this method when button is clicked on app component 
    fabAction(): void { 
    console.log('responding to click on parent component'); 
    this.showFilter = !this.showFilter; 
    } 
} 

</div> 

것은 아무 가치가 각 구성 요소가 다른 사람들이/숨기기 것을 보여줍니다, 그것은 팹 버튼이 응용 프로그램의 구성 요소를 클릭하면, 일부는 조동사가 열립니다 실행하기 위해 자신의 행동의이 것입니다, 일부는 그렇게 리디렉션 구성 요소 자체에서이 동작을 지정할 수있게되어 정말 기쁩니다.

이것에 대한 공식적인 각도 문서를 읽으면서 답변보다 더 많은 질문이 남았습니다. 그래서 누군가가이 문제를 해결할 더 이상적인 방법을 제안 할 수 있기를 바라며 모든 것을 깨끗한 슬레이트로 되돌려 보았습니다.

편집 - 여기

<header *ngIf="currentUrl != '/landing'"> 
    <div class="brand"> 
    <img src="/assets/circle-logo.png" /> 
    </div> 
    <nav> 
    <div class="page-title"> 
     <h2>{{ page?.title }}</h2> 
     <h4>{{ page?.strapline }}</h4> 
    </div> 
    <ul class="header-nav"> 
     <li [routerLink]="['/courses']">Courses</li> 
     <li>Dashboard</li> 
     <li>Community</li> 
     <li>Blog</li> 
     <li>About</li> 
    </ul> 
    <div class="fab-container"> 
     <button class="btn btn-warning btn-fab" (click)="fabAction()"> 
     + 
     </button> 
    </div> 
    </nav> 
</header> 
    <router-outlet></router-outlet> 
<app-footer></app-footer> 

요청

로 app.component.html에 대한 전체 마크 업 내가 표시 내 경로와 어떤 구성 요소를 정의 내 앱 라우팅 모듈의 4 각 영웅의 투어에서 수행으로하는 경로 (에 대한 데모)

const routes: Routes = [ 
    { path: '', redirectTo: 'landing', pathMatch: 'full' }, 
    { path: 'landing', component: LandingComponent }, 
    { path: 'courses', component: CourseListComponent }, 
    { path: 'course/:id', component: CourseComponent } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 

export class AppRoutingModule {} 

Answer 1

FAB을 누를 때 next을 호출하는 RxJS 제목이있는 서비스를 만듭니다. 그런 다음 어떤 구성 요소에서든 subscribe 수 있습니다.

import { Subject } from 'rxjs/Subject' 

@Injectable() 
export class FabService { 
    clickSubject = new Subject(); 
} 

app.component

@Component(...) 
export class AppComponent { 

    constructor(private fabService: FabService) {} 

    fabAction() { 
    this.fabService.clickSubject.next(); 
    } 
} 

child.component

@Component(...) 
export class ChildComponent implements OnInit, OnDestroy { 

    private clickSub: Subscription; 

    constructor(private fabService: FabService) {} 

    ngOnInit() { 
    this.clickSub = this.fabService.clickSubject.subscribe(() => { 
     // FAB was clicked 
    }); 
    } 

    ngOnDestroy() { 
    this.clickSub.unsubscribe(); 
    } 
} 

나는이 작동하지 않을 경우 생각할 수있는 유일한 상황은 경우 그 이후 게으른로드 기능 모듈, FabService의 개별 인스턴스를 가져옵니다. 나는 그 주위에 방법이 있다고 생각하지만, 나는 내 머리 꼭대기에서 그것을 생각할 수 없다.

Answer 2

현재 경로에 관련된 구성 요소 인스턴스에 액세스하려면, 당신은 공유 서비스로이 인스턴스를 설정 OnActivate 후크 인터페이스를 활용할 수있을 때 경로 I 활성화 S :

@Component({ 
    selector: 'some-cmp', 
    template: ` 
    <div>routerOnActivate: {{log}}</div> 
    `}) 
    export class AppComponent implements OnActivate { 
    constructor(private service:RouteStateService) { 
    } 

    routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { 
     this.service.setCurrentRouteComponent(this); 
    } 
} 

는 그런 다음 구성 요소 인스턴스에 액세스 할 수와 기능이 방법에 액세스 할 :

var component = this.service.getCurrentRouteComponent(); 
component.somefunction() 

havent 한 코드를 테스트를 더 많은 정보를 원하시면 this 들여다하시기 바랍니다. 희망이 도움이됩니다.