我正试图按照本教程在我的示例项目中应用@output。我无法让它工作。控制台中没有编译错误或任何特定的错误。我不知道如何使用开发人员工具继续调试@Output。下面是我的文件。

app-component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'testServer', content: 'Just a Server'}];
  constructor(){
    console.log(this.serverElements);
  }
  
  onServerAdded(serverData: {serverName: string, serverContent: string}) {
    console.log("Server Added");
    this.serverElements.push({
      type: 'server',
      name: serverData.serverName,
      content: serverData.serverContent
    });
    console.log("Server Added");
  }

  onBlueprintAdded(blueprintData: {serverName: string, serverContent: string}) {
    this.serverElements.push({
      type: 'blueprint',
      name: blueprintData.serverName,
      content: blueprintData.serverContent
    });
  }



}

app-component.html

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'testServer', content: 'Just a Server'}];
  constructor(){
    console.log(this.serverElements);
  }
  
  onServerAdded(serverData: {serverName: string, serverContent: string}) {
    console.log("Server Added");
    this.serverElements.push({
      type: 'server',
      name: serverData.serverName,
      content: serverData.serverContent
    });
    console.log("Server Added");
  }

  onBlueprintAdded(blueprintData: {serverName: string, serverContent: string}) {
    this.serverElements.push({
      type: 'blueprint',
      name: blueprintData.serverName,
      content: blueprintData.serverContent
    });
  }



}

cockpit-component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'testServer', content: 'Just a Server'}];
  constructor(){
    console.log(this.serverElements);
  }
  
  onServerAdded(serverData: {serverName: string, serverContent: string}) {
    console.log("Server Added");
    this.serverElements.push({
      type: 'server',
      name: serverData.serverName,
      content: serverData.serverContent
    });
    console.log("Server Added");
  }

  onBlueprintAdded(blueprintData: {serverName: string, serverContent: string}) {
    this.serverElements.push({
      type: 'blueprint',
      name: blueprintData.serverName,
      content: blueprintData.serverContent
    });
  }



}

cockpit-component.html

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'testServer', content: 'Just a Server'}];
  constructor(){
    console.log(this.serverElements);
  }
  
  onServerAdded(serverData: {serverName: string, serverContent: string}) {
    console.log("Server Added");
    this.serverElements.push({
      type: 'server',
      name: serverData.serverName,
      content: serverData.serverContent
    });
    console.log("Server Added");
  }

  onBlueprintAdded(blueprintData: {serverName: string, serverContent: string}) {
    this.serverElements.push({
      type: 'blueprint',
      name: blueprintData.serverName,
      content: blueprintData.serverContent
    });
  }



}

我可以在浏览器中看到cockpit-component.ts文件的控制台打印，但这不会导致在app组件中调用onServerAdded（）方法。

重新启动angular和vscode后，现在可以工作了

顺晟科技：