如何在Angular中使用ngOnInit中的Typescript访问器？
在Angular中，可以使用ngOnInit生命周期钩子函数和Typescript访问器来访问和操作数据。
ngOnInit是Angular组件的一个生命周期钩子函数，它在组件初始化完成后被调用。在ngOnInit中，可以执行一些初始化操作，例如获取数据、订阅事件等。
Typescript访问器是一种特殊的方法，用于定义一个属性的读取和写入行为。通过使用访问器，可以在获取或设置属性值时执行一些额外的逻辑。
要在Angular中使用ngOnInit中的Typescript访问器，可以按照以下步骤进行操作：
- 在组件类中定义一个私有属性，并使用访问器来定义该属性的读取和写入行为。例如：
private _data: string;
get data(): string {
// 在获取属性值时执行的逻辑
return this._data;
}
set data(value: string) {
// 在设置属性值时执行的逻辑
this._data = value;
}- 在ngOnInit方法中，可以通过访问器来获取或设置属性的值。例如：
ngOnInit() {
// 获取属性值
console.log(this.data);
// 设置属性值
this.data = 'Hello World';
}通过以上步骤，就可以在Angular中使用ngOnInit中的Typescript访问器来访问和操作数据了。
关于Angular的更多信息和使用方法，可以参考腾讯云的相关产品和文档：
相关·内容
我的.ts文件中有一些用于angular组件的javascript代码(我在mapbox中使用它)。我希望在我的typescript代码中使用该javascript代码(polygonCoordinates[])中的变量，但我不确定如何使用。我已经在代码中包含了ngOnInit()部分。
我已经尝试过直接从javascript部分使用它，但不起作用。任何帮助都将不胜感激，因为我是新手。
ngOnInit() {
let script = this.renderer2.createElement('script');
script.type = `appli
浏览 10提问于2019-10-23得票数 0
回答已采纳
import {Component, ElementRef, OnInit} from 'angular2/core';
declare var jQuery:any;
@Component({
selector: 'jquery-integration',
templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implement
浏览 1提问于2016-01-28得票数 15
1回答
我用webpack来编译角，但编译类定义似乎有问题。如果没有在组件中重新声明这些类，则无法在模块中声明和导出这些类。
示例：
我需要在BasePageComponent下的每个PageComponent上使用pages.module.ts
pages.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BasePageComponent } from './base/base-page.c
浏览 2提问于2017-01-09得票数 0
回答已采纳
1回答
我有两个组件文件：file1.component.ts和file2.component.ts。在按钮事件上，我想从file2.component.ts (例如ngOnInit())在file1.component.ts中调用一个方法。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
&
浏览 2提问于2017-02-20得票数 0
2回答
我想在typescript中从angular 2模块访问google api库。如何做到这点。当我尝试访问(gapi)时，我得到了未定义的。在angular 2中有没有可以作为typescript库工作的NPM模块，我可以使用它，或者必须使用js文件。
以下是模块代码和库参考：
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
。
@Component({
selector: "main-app",
浏览 0提问于2016-03-29得票数 4
回答已采纳
2回答
我们如何在Angular ( 2.x及更高版本)中获取DOM元素？诸如addClass、removeClass等基本功能在typescript中不可用，那么我们如何在angular组件中进行这些DOM操作呢？如果有的话，请给我建议。提亚
浏览 0提问于2016-11-07得票数 12
回答已采纳
2回答
在typescript和javascript中，我们使用let或var来声明变量。但是在angular组件中，我们不使用它们，尽管angular使用typescript。例如 export class ProductComponent implements OnInit {
productNumber = 5;
constructor() { }
ngOnInit() {
}
} 在productNumber中，我们既没有使用let，也没有使用var，但它仍然有效。为什么会这样呢？
浏览 69提问于2020-10-23得票数 0
如果站点使用表单post重定向到我的目标站点，我希望能够使用angular 2 typescript读取post请求中的传入数据。有办法做到这一点吗？
浏览 11提问于2017-02-09得票数 1
回答已采纳
我是Angular 2和TypeScript的新手，我正在尝试遵循我想要在我的另一个组件中使用Test类的变量的代码。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
export class Test{
浏览 2提问于2017-04-12得票数 2
我们用的是角度，我正试着从tslint转换为eslint。抛出大约600个警告的规则是来自Missing return type on function的eslint@typescript-eslint/explicit-module-boundary-types。
我理解我应该在函数中使用返回类型，以及如何实现它。但是，在Angular中，生命周期方法几乎没有任何用处。我应该从ngOnInit返回什么？
所以问题是:我如何才能对每个函数使用这个规则，而不是ngOnInit、ngOnDestroy等？
ngOnInit(): void { // meh
...
}
ngOnInit(
浏览 6提问于2021-06-25得票数 2
回答已采纳
3回答
我使用的是Angular 7。
我试着在Typescript上使用fs模块打开一个目录。我总是有这样的错误：“模块找不到:错误:无法解析文件系统”类型@node和文件系统已安装。
我的代码：
import {Component, OnInit} from '@angular/core';
import * as fs from 'file-system';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls
浏览 42提问于2018-12-07得票数 15
回答已采纳
public addition :any = [];
public display : any = [];
public object1 =['3','2','1'];
public value2 =['5','7','9','8'];
constructor(){}
ngOnInit(){
this.addition=this.object1.concat(this.value2);
this.display=this.addition
浏览 0提问于2018-03-05得票数 2
回答已采纳
在Angular 2中有魔法常量吗，TypeScript？
这是我希望存在的东西：
ngOnInit() {
console.log (__CURRENT_METHOD_NAME__ + has started running');
// outputs ngOnInit has started running.
}
浏览 0提问于2017-11-06得票数 0
1回答
我在和Angular2和TypeScript一起工作。我在.ts文件中设置了输入字段的值。当我运行我的应用程序时，它将它们显示为整数，而我希望将它们显示为两个小数，例如8.00而不是8。以下是我的.ts文件的一部分：
ngOnInit() {
if (!this.phast.operatingCosts) {
let defaultCosts: OperatingCosts = {
fuelCost: 8.00,
steamCost: 10.00,
electricityCost: .080
}
thi
浏览 4提问于2018-01-23得票数 0
如何在Angular 7中使用apexchart？有人可以在typescript中实现它吗？我正在搜索它在Angular中的typescript实现，但我无法做到。我的Angular版本是7.2.4。
浏览 0提问于2019-05-03得票数 1
如何从angular 7调用JavaScript的函数表达式？
我的问题与类似
这是我的test.js
'use strict';
var val = (function() {
function launch() {
console.log("val");
};
return {
launch: launch
};
})();
我想从Angular Typescript调用启动方法，如下所示：
declare var val2: any;
ngOnInit() {
val.launch(
浏览 2提问于2018-12-27得票数 0
在我的Angular应用程序中，当我生成新的组件时，会触发错误"Unexpected @typescript-eslint/no- empty -function“和"Unexpected method 'ngOnInit‘@typescript-eslint/no- empty -function”。 这是我的脚本： import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
浏览 266提问于2021-07-29得票数 0
1回答
无法获取选项卡URL
、、、
在我的Chrome扩展中，我想获得当前的选项卡URL地址。在我的angular2组件中，我创建了字符串变量来保存URL。然后我就这么做：
ngOnInit() {
chrome.tabs.getCurrent(function(tab){
this.currentUrl = tab.url;
});
console.log(this.currentUrl);
}
在控制台中，我得到未定义的消息。因此，问题是如何将Chrome扩展函数结果赋给我的TypeScript变量？
浏览 2提问于2017-03-10得票数 0
在组件的ngOnInit方法中，@Input值将被绑定，因此您可以检查组件上的那些属性，但是似乎没有检查@Output事件绑定的方法。我想知道@Output是否连接在组件上。
(使用角和TypeScript)
import {Component, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'sample',
template: `<p>a sample</p>`
})
export class SampleComponent {
浏览 12提问于2015-10-30得票数 55
回答已采纳
2回答
我是新的角2和类型标，我是呼气与构造函数和ngOnInit。
为什么我可以在构造函数中使用matchMedia：
import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component} from '@angular/core';
/** @title Responsive sidenav */
@Component({
selector: 'sidenav-responsive-example',
templateUrl: '
浏览 7提问于2017-12-29得票数 1
回答已采纳
1回答
在AngularJS中，我能够做到这一点：
angular.module('myApp').service('myService', [ function () {
this.loadConfiguration = function () {
};
this.loadConfiguration();
}]);
如何实现相同的功能，在服务中调用一个函数，在TypeScript中调用角形2？
我试过：
@Injectable()
export class ChatService {
ngOnInit() {
this
浏览 1提问于2017-01-04得票数 0
回答已采纳
我写了一个这样的函数：
function clean() {
fsExtra.remove(sumoDir)
}
在名为commands.js的文件中
我以这种方式导出此函数：
module.exports = {[...], clean: clean, [...]}
我需要在用于我的前端的角TypeScript组件中调用这个函数。
首先，我创建了一个模块
ng g
接下来，我以这种方式在home.module.ts中导入我的函数：
import { NgModule } from '@angular/core';
import { CommonModule } from
浏览 2提问于2022-01-04得票数 0
回答已采纳
我的问题很简单，我有一个下面的JSON Typescript对象，我喜欢迭代JSON属性 {"work_type":"Fabricación","work_type_resp":"Mesa","looking_for":"Relación Calidad/Precio","image":"https://s3-sa-east-1.amazonaws.com/online-quotation-images/153366018967.png","width
浏览 45提问于2018-08-08得票数 3
回答已采纳
我有一个包含两列的ag-Grid :一个ID列和一个Description列。我在columnDefs中的TypeScript类的ngOnInit()方法中构造了这两列的列定义。 在Description列中，我使用cellRendererFramework在我的ag-Grid中呈现一个routerLink。我使用cellRendererParams将一些必要的参数传递给我的Angular渲染器组件。在Description列中，我需要访问ID列的ID值，并将其放入cellRendererParams参数'resourceId‘中。我需要这个ID来构建我的工作RouterLink。
浏览 33提问于2018-12-22得票数 1
回答已采纳
我在工作中打开了一个angular 10项目。过了一段时间，当我看到HMR添加到angular 11中时，我通过尝试使用HMR来升级项目。由于没有，我打开了一个全新的angular项目。已检查HMR是否正常工作。我移动了所有的组件、服务、模块、样式(当然没有node文件夹)，并使用ng serve --hmr启动了它，但它再次无法工作。正在刷新页面。
我在这两天。有什么想法会很感谢你吗？谢谢。我的包JSON是：
{
"name": "date-manager-ui",
"version": "0.0.0",
"
浏览 2提问于2021-03-10得票数 3
我正在尝试将集合中的文档添加到Angular中的数组中。我尝试的方法是获取文档，然后将其推送到数组中，但不知何故它不起作用。typescript文件的代码片段是
import { AngularFirestore } from '@angular/fire/firestore';
items: Array<FirestoreItem> = [];
constructor(
private firestore: AngularFirestore
) {}
ngOnInit(): void {
this.items.push(
浏览 5提问于2020-07-31得票数 0
我知道ngOnInit是特定于Angular的语法，而构造函数是Typescript/ES2015类语法。但是当涉及到它们在Angular 2组件中的使用和执行时，有什么不同呢？
浏览 0提问于2016-09-19得票数 1
我想在类型记录中使用jquery和easypiechart文件的函数。
不是这样的。
如何定义这些脚本--我在代码中指定的脚本为类型记录？
index.component.ts
import { Component, OnInit } from '@angular/core';
import * as $ from "../../../../../assets/plugins/jquery/jquery.min.js";
import { easyPieChart } from "../../../../../assets/plugins/easy
浏览 0提问于2019-02-05得票数 1
回答已采纳
2回答
我正在尝试使用。最好的方法来描述我的问题是通过一个例子。我有这样的服务：
export MyService {
method() {
// Some Code
}
}
我正在用一个儿童服务来扩展它：
export MyAnotherService extends MyService {
anotherMethod() {
// Some Code
}
}
然后在应用程序模块的提供者中提供如下内容：
{ provide: MyService, useClass: MyAnotherService }
然后我就像这样使用父服务：
constructor(
pri
浏览 0提问于2018-05-10得票数 0
回答已采纳
1回答
我尝试使用angular中的httpclient get方法从服务器检索值。但是我在控制台和网页上都看不到。我该怎么做？
Typescript文件：
export class CountryComponent implements OnInit {
constructor(private http:HttpClient) { }
country:Observable<Country[]>;
ngOnInit() {
this.country=this.http.get<Country[]>(path+"/getAllCountries
浏览 1提问于2019-04-08得票数 0
我想将这个查询的结果存储到一个jQuery(this).closest('li').attr('id') 2类型的变量中。
export class DashboardComponent implements OnInit {
angVariable: any;
ngOnInit() {
jQuery(this.elRef.nativeElement).on("click", "li a", function() {
/* I want to store this query result to Angul
浏览 0提问于2016-07-14得票数 0
constructor (service: MyService) {}
ngOnInit() {
this.service.init();
}
在上面的代码中，我得到：-
Property `service` does not exist on type 'MyComponment'
但是，如果我声明service为private，它就能工作。这里发生什么事情？
--
角8.2.12，TypeScript 3.5.3
浏览 2提问于2019-11-01得票数 0
回答已采纳
在我看来，这就像是Angular框架中的什么东西被打破了。下面是版本信息。我有一个如下所示的组件--只包含相关的部分： export class RepliesComponent implements OnInit, AfterViewInit {
@Input() serial: number;
// ...
ngOnInit() {
console.log('RepliesComponent.ngOnInit', this.serial);
}
ngAfterViewInit(): void {
console.log('
浏览 23提问于2020-01-03得票数 1
我正在使用Angular 5前端框架中的javascript Google地图组件
export class MapComponent implements OnInit {
ngOnInit() {
this.initializeGMap()
}
initializeGMap() {
var myLatlng = new google.maps.LatLng(12,77);
var mapOptions = {
zoom: DEFAULT_MAP_ZOOM,
center: myLatlng,
scrol
浏览 28提问于2018-06-08得票数 2
回答已采纳
我有一个调用ASP.Net Web API服务的Angular Universal应用程序。
我已经将控制台写到了对web服务的角度调用(这是从组件的构造函数或ngOnInit发起的，我尝试了这两种方法)和Typescript中的subscriber函数，以及Web API方法。
在运行该应用程序时，我注意到Angular Universal应用程序并不等待Web API的结果。
我收到的最后一条控制台写入消息来自Web API，而不是来自订阅者调用中的函数。
如何强制Angular Universal应用程序在完成渲染之前等待结果？
浏览 0提问于2017-04-08得票数 6
我只是被TypeScript和Angular2弄湿了脚。我正在使用一个具有嵌套对象结构的API。我希望我的模型能够反映API中的资源。TypeScript中定义的模型/资源“查询”：
// inquiry.ts
export class Inquiry {
name: {
first: string,
last: string
};
email: string;
phone: string;
question: string;
}
我的表单组件是这样的：
import { Component, OnInit } from '@angular/core
浏览 2提问于2016-09-16得票数 0
回答已采纳
在播放完视频之前，我无法访问视频元素属性。 我目前正在检查ngOnInit中的视频时长和返回的NaN值。 我用来获取持续时间的代码行是： HTML： <video src="myvid.mp4" #vid></video> TypeScript： @ViewChild('vid') vid: ElementRef
ngOnInit(){
//vid is of type ElementRef
this.duration = this.vid.nativeElement.duration
}
浏览 12提问于2019-12-10得票数 0
Kendo UI angular 2 TabStripComponent有一个selectTab方法。如何使用它来激活typescript代码中的选项卡？
浏览 17提问于2017-08-17得票数 3
我正在制作一个小型的应用程序，上面有Angular7和背面的AppComponent，我要做的是订阅一个服务，然后从我的主AppComponent中将返回的数据保存到一个对象类型变量中，然后在我的所有其他组件中访问这个变量。
Api服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService
浏览 0提问于2019-03-16得票数 5
回答已采纳
我正在为我的Angular2应用程序(Spring )使用J2EE。我已经实现了延迟加载，但它仍然需要更多的时间(大约2分钟！)来加载。
有两个大小较大的文件正在加载：
typescript.js :4.75MB
compiler.umd.js :0.98MB
而且typescript.js文件没有缓存。每次重新加载它的下载。
我的systemjs.config.js文件是：
System
.config({
transpiler : 'ts',
typescriptOptions : {
浏览 3提问于2017-09-26得票数 1
所以我使用的是angular 7，我有一个无法处理的csv文件，所以我编写了我的第一个typescript 2脚本，但失败了……我想要有一个列和行对应的数组来做TypeScript 2中的csv文件 import { Injectable } from '@angular/core';
import * as fs from 'fs';
@Injectable({
providedIn: 'root'
})
export class ProduitsService {
public productsArray: [][];
con
浏览 18提问于2019-02-27得票数 0
我正在使用如下所示的技术开发一个应用程序。我有一个名为"test.page.ts“的打字文件，里面有一个变量"response: any"；我必须在另一个名为"test2.page.html”的打字文件中重用它，称之为{{response.name}}。我该怎么做呢？谢谢。 我目前使用的技术： Ionic 4.10.2
Angular 6
8.1.2 (cordova-lib@8.1.1)
TypeScript
Visual Studio Code test.page.ts import { Component, OnInit } from '@a
浏览 15提问于2019-02-26得票数 1
我在一个Angular4应用程序中工作，希望根据条件处理跨度(启用/禁用)。
当购物车中没有商品时，我想禁用跨度。
但当购物车中至少有一种产品时。跨度将被启用。
<span class=" notification-counter badge badge-danger" data-toggle="modal" data-target="#exampleModal" style="cursor: pointer;">{{nCount}}</span>
从HTML或typescript方面，我该如何处理
浏览 0提问于2018-03-21得票数 5
回答已采纳
3回答
在呈现组件之前，我正在尝试从API加载一个事件。目前，我正在使用我的API服务，我从组件的ngOnInit函数调用该服务。
我的EventRegister组件：
import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRE
浏览 4提问于2016-02-26得票数 173
回答已采纳
我正在编写一个Angular2应用程序。谁能告诉我如何使用来自Angular2的S3 Javascript API。这有可能吗？
或者有没有一个过程可以让我在我的typescript中使用javascript API？我使用SystemJS来加载模块。
浏览 0提问于2016-06-16得票数 0
在我为Angular 2找到的示例中，每个应用程序可以创建一次组件：
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
浏览 2提问于2016-02-10得票数 4
1回答
我有一个父抽象类声明如下：
import { Localization } from 'angular-l10n';
import { SomeModel} from '../../api/models/some-model';
import { SomeService } from '../../api/services/some.service';
export abstract class BaseComponent extends Localization implements OnInit {
someModel: SomeMo
浏览 0提问于2018-05-15得票数 4
回答已采纳
我有app.js文件：
var app = angular.module('app', ['kendo.directives', 'ui.router', 'app.sysSettings', 'app.globalConstants',
'pascalprecht.translate', 'ngTouch', 'ngDialog', 'ngCookies']);
我想在ts文件中重用这个变量("app")。我的app.comp
浏览 34提问于2018-08-29得票数 1
回答已采纳
我有一个web api，在那里我可以得到一个帐号列表。
c#
public async Task<IHttpActionResult> GetAccountNumber(string username)
{
var accountNumber = await (
from ca
select new { ca.account_number }).ToListAsync();
// Return the records
return Json(accountNumber);
浏览 2提问于2018-12-05得票数 1
我使用的是具有回调的javascript对象。一旦回调被触发，我想在Angular2组件中调用一个函数。
示例HTML文件。
var run = new Hello('callbackfunction');
function callbackfunction(){
// how to call the function **runThisFunctionFromOutside**
}
<script>
System.config({
transpiler: 'typescript
浏览 15提问于2016-02-09得票数 79
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
