Question

我有一个标题组件和一个侧栏组件作为主组件的子组件，如下所示。

主要成分

@Component({
    selector: 'my-app',
  template: `
    <body>    
      <app-header></app-header>
      <app-sidebar></app-sidebar>
      <main class="mdl-layout__content mdl-color--grey-100">         
         <auth-router-outlet></auth-router-outlet>        
      </main>
    </div>         
  </body>

    `,
    directives: [ROUTER_DIRECTIVES, SidebarComponent, HeaderComponent, MDL, AuthRouterOutlet,SimpleNotificationsComponent],
    providers: [AUTH_PROVIDERS,NotificationsService]
})

export class AppComponent {}

标头组件有一个子组件。我想在用户点击任何侧边栏链接时销毁这个子组件。目前，一旦呈现数据，子组件就会成为标题的一部分并破坏布局。

HeaderComponent

@Component({
    selector: 'app-header',
     directives: [AptSearchComponent],
    template: `
            <div class="mdl-textfield__expandable-holder">
              <input class="mdl-textfield__input" type="text" id="search" (keyup.enter)="Search($event)">
            </div>       
     <aptsearch *ngIf="apartment" [model]="apartment"></aptsearch>    
    `,
})

export class HeaderComponent {

  public apartment: string;

    constructor(private apartmentService: ApartmentService,private router: Router,private sharedService: SharedService) { 
       this.apartmentService=apartmentService;
       this.sharedService=sharedService;
     }

     Search(event){  
       this.apartment = event.target.value;
       this.router.navigate(['AptSearch']);     
     }
}

标题组件的子组件，当用户单击侧栏中的任何链接时，需要将其销毁。

@Component({
    selector: 'aptsearch',  
  template: `    
     <div *ngFor="#aptdetails of aptDetails">
                <h2 class="mdl-card__title-text">{{aptdetails.aptID}}</h2>
              </div>

    </div>         
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class AptSearchComponent implements OnInit {
    @Input() model:string;

    aptDetails: any;

    constructor(private apartmentService: ApartmentService, private sharedService: SharedService,private zone:NgZone) {
    this.apartmentService = apartmentService;        
    }


    ngOnInit(){}

    ngOnChanges(changes: any) {
    console.log('Inside the Search Component from parent -->' +this.model);
    this.apartmentService.searchApt2(this.model).subscribe(res => {this.aptDetails = res});
    }    
}

如何实现这一目标？

Answer 1

使用*ngIf

并将showChild设置为false以从DOM中删除元素。

Answer 2

没有简单的方法可以连接两个兄弟组件（在您的情况下，标题和侧栏）。

一个选项是让侧边栏组件发出应用程序组件（a）订阅的事件（EventEmitter），然后（b）然后在标头组件中设置属性。

另一个选择，我的首选，是在您的ApartmentService或其他服务中有一个可观察的选项。像这样：

在ApartmentService中：

apartmentSearch: new BehaviorSubject<string>();

search(query: string) {
    this.apartmentSearch.next(query);
}

在侧边栏中点击某些内容后，使用null：

调用搜索

somethingClicked() {
    this.apartmentService.search(null);
}

在标题中：

ngOnInit() {
    this.subscription = this.apartmentService.apartmentSearch.subscribe(x => this.apartment = x);
}

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

Search(event) {
    this.apartmentService.search(event.target.value);
}

我希望这会有所帮助。

Angular2 - 当用户导航到另一个组件时如何销毁子组件

2 个答案: