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

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中我使用子组件事件“onArrowClick”如下所示:

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

我希望能够阻止子组件中的函数 arrowClicked() 在父组件中继续运行(不会出现“arrowClicked”警报)(适用于无权访问的用户)子组件)我尝试了简单的 return false 但没有成功。

你能帮我理解一下吗？

谢谢

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');
    }
  }

}