Question

我一直在使用Angular 6，我也是Angular环境的新手。

所以您知道我的问题，我一直在以jQuery方式进行思考。这是我的问题。

我想在页面加载时触发Anchor链接，例如Angular 6中的以下jQuery代码。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#hello').click(function () {
                    console.log('yo yo yo .....you good to go.!!!');
                });
                $('a').trigger('click');
            });
        </script>

<a id="hello" href="http://www.google.com">Click me</a>

您能在Angular 6中帮助我吗？我知道我们可以在元素上单击一下。但是在我的项目中，我不知道可以对锚标记进行控制。我的意思是我无法添加click方法，而是想像jQuery一样在外部触发它。

任何帮助将不胜感激。

Answer 1

您可以使用renderer2服务dispatchEvent方法来调度事件

@ViewChild('elem') elem: ElementRef;
  constructor(private renderer2: Renderer2) {}

  ngOnInit() {
    this.renderer2.listen(this.elem.nativeElement, 'click', () => {
      alert(111);
    });
    let event: Event = new Event('click');
    this.elem.nativeElement.dispatchEvent(event);
  }

示例：https://stackblitz.com/edit/angular-renderer2-dispatch-event-2uhpay

Answer 2

更改锚点链接，以使其具有如下所示的单击功能：

onClickMe(event){
  console.log('yo yo yo .....you good to go.!!!');
  window.open('https://google.com');
}

然后在Component.ts文件中，创建相同的功能：

  ngOnInit() {
    this.onClickMe(event);
  }

最后，在该Component.ts文件的ngOnInit（）方法上，如下所示调用该函数：

//Disable Top Verify Button if two or more checkboxes are selected.
    $(document)('.verifyshipment-btn').prop('disabled', true);
    $(document).on(".individual").on("click", function () {
        if ($(".individual:checked").length > 1) {
            $('.verifyshipment-btn').prop('disabled', false);
        }
        else {
            $('.verifyshipment-btn').prop('disabled', true);
        }
    });

    //Select All
    $('.verifyshipment-btn').prop('disabled', true);
    $(document).on(".selectall").click(function () {
        if ($(".individual:checked").length > 1) {
            $('.verifyshipment-btn').prop('disabled', false);
        }
        else {
            $('.verifyshipment-btn').prop('disabled', true);
        }
    });

Answer 3

您可以将click事件添加到定位链接

<a (click)="onClickMe($event)">Click me!</a>

在组件中：

onClickMe(event){
   event.preventDefault();
   window.open('https://google.com'); // you can load external URL
}

Answer 4

使用(click)="onClickMe()"使您处在正确的轨道上。现在剩下要做的就是向模板中具有标签的组件添加方法onClickMe。

export class ExampleComponent {
  onClickMe() {
    console.log('');
  }
}

Angular 6触发单击事件，如jQuery

4 个答案: