时间戳

首页 > 解决方案 > Angular 10，带有 EventEmitter 的路由器出口输出到 SideNav 内容中的父级

angular - Angular 10，带有 EventEmitter 的路由器出口输出到 SideNav 内容中的父级

问题描述

我有一个布局页面，其中包含 mat-sidenav-container 和路由器插座。我尝试调用该函数并将数据从路由器插座页面通过 EventEmitter 传递给 LayoutPage，但它不起作用。我在这里发现了类似的问题： @Output with EventEmitter from child to parent, view doesn't update in parent

如果将路由器出口标签替换为组件选择器标签（app-child），这是可行的，但路由器出口标签对我来说是必要的。我需要通过路由器出口标签导航网页。那我该怎么办？

layout.component.html

<mat-sidenav-container>
    <mat-sidenav #sideNav opened="true" mode="side" class="sidebar" style="background-image: url('assets/images/test.png');">
      <ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="test nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]" [queryParams]="filter">
                <i class="material-icons">{{menuItem.icon}}</i>
                <p>{{menuItem.title}}</p>
            </a>
        </li>
    </ul>
    </mat-sidenav>
  
    <mat-sidenav-content class="content">
        <app-header></app-header>
      <router-outlet (onDatePicked)='doSomething($event)' > </router-outlet>
      
    </mat-sidenav-content>
  </mat-sidenav-container>

布局.component.ts

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class ChemoLayoutComponent implements OnInit {

  filter:Filter
  menuItems: any[];
  constructor(private route: ActivatedRoute,private app: ApplicationRef) {
    this.menuItems = [
      { path: '/chemo/child', title: 'aaa',  icon: 'library_books' },
      { path: '/chemo/child1', title: 'bbb',  icon:'build'},
      { path: '/chemo/child2', title: 'ccc',  icon:'search' },
  ];
  this.filter = new Filter();
   }

  ngOnInit(): void {
    this.route.queryParams.subscribe((params) => {
      this.filter.CHARTNO = params['CHARTNO'];
    });
  }

  doSomething($event){  //<== It's not working
    this.app.tick();
    console.log("Test");
  }
}

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
  constructor() {

   }
  ngOnInit(): void {
  this.onDatePicked.emit("hello");
}
}

标签： angularangular10

解决方案

<router-outlet (onDatePicked)='doSomething($event)' > </router-outlet>

这将不起作用，因为onDatePicked输出不存在RouterOutlet（参见Angular doc）。

如果你想在不受路由限制的情况下从子组件到父组件进行通信，则需要实现一个服务。它看起来像这样：

子到父.service.ts

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

  onDatePicked$ = new Subject<any>();

  constructor() { }

}

布局.component.ts

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class ChemoLayoutComponent implements OnDestroy {

  onDatePickedSub: Subscription;

  constructor(
    private childToParentService: ChildToParentService
  ) {
    this.onDatePickedSub = this.childToParentService.onDatePicked$.subscribe($event => {
      this.doSomething($event);
    });
  }

  ngOnDestroy(): void {
    if (this.onDatePickedSub) {
      this.onDatePickedSub.unsubscribe();
    }
  }

  doSomething($event): void {
    this.app.tick();
    console.log("Test");
  }

}

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor(
    private childToParentService: ChildToParentService
  ) { }

  ngOnInit(): void {
    this.childToParentService.onDatePicked$.next('hello');
  }

}

推荐阅读