在Angular 2+中从外部脚本访问方法
在Angular 2+中，可以通过以下步骤从外部脚本访问方法：
- 首先，在Angular组件中定义一个公共方法，该方法将在外部脚本中被调用。例如，我们可以在组件类中定义一个名为
externalMethod的方法。
export class MyComponent {
externalMethod() {
// 外部脚本访问的方法逻辑
}
}- 接下来，在组件的模板文件中，使用
ViewChild装饰器来获取组件实例的引用。这将允许我们从外部脚本中访问组件的方法。
<!-- my-component.component.html -->
<div #myComponentRef></div>export class MyComponent implements AfterViewInit {
@ViewChild('myComponentRef') myComponentRef: ElementRef;
ngAfterViewInit() {
// 组件视图初始化后执行的代码
}
}- 然后，在组件的
ngAfterViewInit生命周期钩子函数中，获取组件实例的引用后，将其绑定到全局对象上，以便外部脚本可以访问。
export class MyComponent implements AfterViewInit {
@ViewChild('myComponentRef') myComponentRef: ElementRef;
ngAfterViewInit() {
(window as any).myComponent = this.myComponentRef.nativeElement;
}
}- 最后，在外部脚本中，可以通过全局对象访问组件的方法。例如，我们可以在外部脚本中调用
externalMethod方法。
// 外部脚本
window.myComponent.externalMethod();这样，我们就可以通过以上步骤在Angular 2+中从外部脚本访问组件的方法。请注意，这种方法需要谨慎使用，确保在访问组件方法之前组件已经初始化完毕。
相关·内容
5回答
角2 @ViewChild返回未定义的
dom、angular、scroll、viewchild
我看过几个相关的帖子和文档，但仍然无法从@ViewChild获得预期的行为。
最后，我试图设置一个div的滚动位置。这个元素不是一个组件，而是我的HTML中的一个普通div。
为此，我尝试使用@ViewChild获取我需要的DOM元素，并设置它的滚动值。(顺便说一句，如果您知道在没有@ViewChild (或jQuery)的情况下更好地完成这一任务，我们将非常感谢您的回答！)
目前，@ViewChild只返回未定义的内容。通过一些虚拟检查：-我正在访问AfterViewInit中的元素--在这个元素上没有任何其他指令，比如*ngIf或*ngFor。
这里是控制器：
import { Compo
浏览 0提问于2016-08-31得票数 44
回答已采纳
1回答
如何使用升力放大角5？
jquery、html、angular、angular5、elevatezoom
我在我的角5应用程序中使用了elevate-zoom jquery插件，但它显示了错误
错误TypeError: this.elevatezoomBig.nativeElement.elevateZoom不是一个函数
这是我的密码
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
export class ProductComponent implements AfterViewInit, OnInit {
ngAfter
浏览 0提问于2018-06-12得票数 0
1回答
app.component.ts
import { Component, ViewChild ,AfterViewInit, ElementRef} from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html
浏览 2提问于2020-04-05得票数 0
2回答
我需要从我的子组件中获取在父组件(基本布局)中定义的内容offsetHeight <div>，这样我就可以做出另一个大小相同的<div>。
我试过这样做，但得到了Cannot read property 'nativeElement' of undefined。
下面是布局组件：
<!-- Main content -->
<div class="main" #mainContentArea>
<!-- Breadcrumb -->
<ol class="brea
浏览 6提问于2017-06-28得票数 3
回答已采纳
3回答
angular 4 viewchild nativeElement offsetWidth意外更改
angular、viewchild
我有一个这样的组件：
import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, Output, ViewEncapsulation, EventEmitter, AfterViewInit } from '@angular/core';
import * as d3 from 'd3';
@Component({
selector: 'coefficient-histogram',
templateUrl: './coefficient-histog
浏览 3提问于2017-10-09得票数 1
2回答
以编程方式单击子组件窗体中的按钮
angular
我试图在子组件中单击窗体上的一个按钮。我也尝试过使用ViewChild & ViewChildren，将模板引用为ElementRef。它都返回值，而不是本机元素。
import {
Component,
ViewChild,
AfterViewInit,
ElementRef
} from '@angular/core';
import {
HelloComponent
} from './hello.component';
@Component({
selector: 'my-app',
template
浏览 2提问于2018-08-22得票数 3
回答已采纳
1回答
从父组件获取角形子组件的offsetHeight
angular
从父组件获取计算角度的子组件高度的最佳方法是什么？我有一个类似下面的组件
import { Component, ViewChild } from 'angular2/core';
(...)
@Component({
selector: 'my-app',
template: `
<h1>My Add Angular 8 app</h1>
<ng-container *ngFor="let item of list>
浏览 2提问于2020-05-14得票数 0
1回答
我想使用ViewChild访问组件的DOM。但是当我尝试访问nativeElement属性时，它是undefined。
下面是代码片段。
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { AlertComponent } from './alert.component';
@Component({
selector: 'app-root',
template: `
<app-alert #alert>My
浏览 0提问于2017-08-28得票数 51
回答已采纳
6回答
我希望是个简单的问题。
我希望在触发$document.ready()的Angular2等效项时运行脚本。实现这一目标的最佳方法是什么？
我试着将脚本放在index.html的末尾，但我发现这不起作用！我认为它必须放在某种组件声明中？
是否可以从.js文件中运行加载脚本？
编辑-代码：
我已经将以下js和css插件注入到我的应用程序中(从)。
<link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
浏览 101提问于2015-12-31得票数 90
回答已采纳
3回答
如何使用angular 4从父元素获取子DOM元素引用
angular、angular-components
我需要使用angular 4从父组件获取子组件DOM引用，但我无法访问子组件DOM，请指导我如何实现这一点。
parent.component.html
<child-component></child-component>
parent.component.ts
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'parent-component',
tem
浏览 2提问于2017-12-15得票数 10
回答已采纳
2回答
聚焦克隆元素
angular、angular6
我有一个ng-template，只要点击一个按钮，它就会被克隆。在ng-template中，有一个具有属性autofocus的输入字段。我想要的是聚焦将被克隆的输入字段。我该怎么做呢？
我已经在this.email.nativeElement.focus();上尝试过了，但是我得到了错误：
无法读取未定义的属性“nativeElement”
HTML:
<form id="add-user">
<ng-template #emailTmpl>
<mat-form-field class="email full
浏览 1提问于2018-07-23得票数 1
回答已采纳
2回答
如何在Angular组件中执行DOM操作？
angular、typescript、angular2-components、angular5
我们如何在Angular ( 2.x及更高版本)中获取DOM元素？诸如addClass、removeClass等基本功能在typescript中不可用，那么我们如何在angular组件中进行这些DOM操作呢？如果有的话，请给我建议。提亚
浏览 0提问于2016-11-07得票数 12
回答已采纳
1回答
mat-datepicker作为ag-grid弹出窗口的单元格编辑器显示为空白
angular、angular-material、ag-grid
在我升级到angular 9之前，我有一个material datepicker作为ag-grid的单元格编辑器，它可以工作--现在datepicker弹出，但弹出窗口是空白的。我在同一页面上的其他区域中有日期选择器，它们在ag-grid之外工作得很好：
这是我的单元格编辑器：
import { Component, AfterViewInit, ViewChild } from '@angular/core'
import { MatDatepicker } from '@angular/material/datepicker'
@Component({
浏览 1提问于2020-06-09得票数 1
1回答
如何以角度设置文本框的焦点
angular
如何将焦点设置为组件模板中的元素(例如textbox)？我试过下面的代码。
Html：
<input #input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />
构成部分：
import {Component, Input, Output, AfterContentInit, ContentChild,
AfterViewChecked, AfterViewInit, View
浏览 0提问于2017-03-30得票数 1
3回答
角2 owlCarousel不是函数
jquery、angular、owl-carousel-2
我尝试使用owlcarousel 2和角4。我有以下设置：
.angular-cli.json
"scripts": ["../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modu
浏览 0提问于2017-09-07得票数 3
2回答
Angular 2:从组件访问元素，getDocumentById不工作
angular、dom、angular2-template、angular2-components
我有一个Angular 2组件，我想通过元素的id来检索元素div <div id ="myId">。我尝试在我的组件(TypeScript)中执行：document.getElementById("myId")，但得到一个错误：“无法找到名称文档”。我在其他帖子中看到我们可以使用@ViewChild做类似的事情，但是我不知道如何使用div，有什么想法吗？
浏览 2提问于2017-03-04得票数 34
回答已采纳
2回答
角6:如何访问电子<webview>元件的API？
angular、dom、electron
目前使用的是超棒的。假设我想访问的API。
我目前已经创建了以下示例组件：
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: 'browserwindow',
template: '<webview #webview></webview>'
})
export class BrowserwindowComponent implements AfterViewInit {
@
浏览 0提问于2018-07-18得票数 0
回答已采纳
1回答
我有一个JSON数据，我想在Angular 8的paper.JS中使用它。
angular、angular8、paperjs
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { PaperScope, Project, Path, Point } from 'paper';
import * as $ from 'jquery';
import * as paper from 'paper';
declare const drawTrack:any;
declare const parseCrossingData:any;
declare
浏览 15提问于2020-06-23得票数 1
2回答
ngAfterViewInit的单元测试？
angular、unit-testing
我刚开始编写unit单元测试用例。我必须为ngAfterViewInit.编写一个测试用例我不知道怎么开始。我用的是角7。
我的组件代码：
export class MyAccessComponent implements OnInit, AfterViewInit {
// Spinner
pageLoaded: boolean;
@Input() diameter = 64;
@Input() strokeWidth = 7;
// Icons
faEdit = faEdit;
dataSource;
@ViewChil
浏览 0提问于2019-03-21得票数 9
1回答
创建一条指令以启用对输入字段的关注
angular、focus、directive
我尝试在应用程序的许多输入中激活焦点。我想我会创建一个自定义指令，而不是重复代码，但我做不到。如果有人能帮助我……下面是我的错误代码:指令： import { AfterViewInit, Directive, ElementRef, ViewChild } from '@angular/core';
@Directive({
selector: '[appFocus]'
})
export class FocusDirective implements AfterViewInit {
@ViewChild('zone') zoneI
浏览 11提问于2021-07-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
