Question

我有一个只有一个按钮的角度应用程序。

点击按钮我就能打开一个弹出窗口

index-component.html（目标网页）

<button type="button" class="btn btn-primary" (click)=warning.show()>
</button>
<app-modal #warning>
</app-modal>

索引component.ts

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

  export class IndexComponent implements OnInit {
    public show(): void {
   this.visible = true;

   setTimeout(() => this.visibleAnimate = true, 100);  
 }
}

model-component.html（弹出式组件）

<div class="modal-dialog modal-sm" role="document">    
    <div class="modal-content">
     Some data for popup here..........
    </div>
</div>

上面开始弹出的执行是通过

行进行的

(click)=warning.show()

哪种方法完美无缺。

现在我需要将此调用移至TS文件。

所以，在index-component.ts中我需要调用warning.show()

但是，我无法在TS文件中获取#warning的实例。

我将如何实现这一目标？

Answer 1

你可以使用像这样的@viewChild来获取Angular中定义的局部变量的实例 -

<button type="button" class="btn btn-primary" (click)=getInstance()>
</button>


export class IndexComponent implements OnInit, AfterViewInit {
@ViewChild('warning') warning: any;
  ngAfterViewInit() {
      console.log(this.warning);
  }
  getInstance() {
    console.log(this.warning);
  }
}

Working Example for the same

Answer 2

有两种方法可以实现这个目标

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

  export class IndexComponent implements OnInit {
  @ViewChild('warning') warning: any;

 onButtonClick() {
    this.warning.show()
 }
}

这里的Html按钮点击应该是（click）=“onButtonClick（）”

或者您可以将引用作为参数从.html文件

传递

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

  export class IndexComponent implements OnInit {


 onButtonClick(warning:any) {
    warning.show()
 }
}

这里的Html按钮点击应该是（click）=“onButtonClick（警告）”

Angular popup不能从TS文件中运行，但可以从HTML开始工作

2 个答案: