Question

我有一个父组件：

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

export class AppComponent {

  funcBoo():void{
    alert("boo");
    //return false - didn't work
  }

}

和子组件：

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

export class ChildComponent implements OnInit {


  @Output() onArrowClick: EventEmitter<any> = new EventEmitter();


  arrowClicked(){
    this.onArrowClick.emit(null); 
    alert('arrowClicked');
  }

  }

}

在父级的html中我使用子组件事件＆＃39; onArrowClick＆＃39;像这样：

<app-child (onArrowClick)="funcBoo()"></app-child >

我希望能够阻止子组件中的arrowClicked（）函数继续运行（＆＃39; arrowClicked＆＃39; alert won not t出现），在父组件中（＆＃39;对于无法访问子组件的用户而言我试过简单的返回假，它没有用。

你能帮我理解吗？

谢谢

Answer 1

我建议您添加@Input选项，以便在需要时禁用发射。下面带有disabled选项的示例：

<app-child [disabled]="parentVariableHere" (onArrowClick)="funcBoo()"></app-child >

然后您的子组件将是：

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

export class ChildComponent implements OnInit {

  @Input() disabled: Boolean = false;
  @Output() onArrowClick: EventEmitter<any> = new EventEmitter();


  arrowClicked(){
    if(!this.disabled) {
      this.onArrowClick.emit(null); 
      alert('arrowClicked');
    }
  }

}

Angular 4 - 从子组件发出的停止函数

1 个答案: