Angular 如何使用'；单击'；方法转到父组件

当我单击组件

产品列表.component.html

中的按钮时：

添加

我使用组件

产品列表中的方法
addProduct
。组件.ts

@Component({
  selector: "app-product-list",
  templateUrl: "./product-list.component.html",
  styleUrls: ["./product-list.component.css"]
})
export class ProductListComponent implements OnInit {

  @Output() emitProductList: EventEmitter<string> = new EventEmitter<string>();

  constructor() {}

  ngOnInit() {}

  addProduct(name: string) {
    this.emitProductList.emit("add");
    console.log("add"); // this line is displayed
  }
}

此方法

goToAdd

不起作用（product.component.ts）：

如何从

产品列表.component.html

组件转到

product.component.html

---

非常感谢您的帮助

我认为emitProductList提供给了错误的选择器

检查一下下面的部分

<nav>
    <a  (click)='goTo("list")' >List</a> 
    <a  (click)='goTo("add")' >Add</a>
</nav>
<app-product-list (emitProductList)='goToAdd($event)' [hidden]='!hideList'></app-product-list>

<app-add-product  [hidden]='!hideAdd'></app-add-product>

列表
添加

将此

（emitProductList）='goToAdd（$event）

放入

中，然后在

goToAdd（）

方法中使用

router.navigate（）

组件的“隐藏”对于角度来说非常罕见，可能不是您想要的。也许你应该检查一下角度路由器和所有相关的东西。

goToAdd(e:any){
  if (e === 'list') {
    this.hideList = true; 
    this.hideAdd = false; 
  }
  if (e === 'add') {
    console.log(' --- add'); // this line is not displayed
    this.hideList = false; 
    this.hideAdd = true; 
  }
}

<nav>
    <a  (click)='goTo("list")' >List</a> 
    <a  (click)='goTo("add")' >Add</a>
</nav>
<app-product-list (emitProductList)='goToAdd($event)' [hidden]='!hideList'></app-product-list>

<app-add-product  [hidden]='!hideAdd'></app-add-product>