这是一个Angular应用程序的问题,但我不认为这是一个角度特定的问题.
我正在开发一个Angular 7应用程序,我正在使用一些库,这些库是通过前端的脚本标签从其他来源(Stripe,recaptcha,googletags等)导入的.我将在这里使用Stripe作为示例,因为Stripe绝对要求Stripe.js客户端从前端库导入PCI兼容性,因此从源服务器端不是一个选项.
我已经Stripe从DefinitelyTyped 安装了类型.如果我在组件中添加declare let Stripe: any;和使用Stripe它,它可以工作,但当然它不是类型安全的.如果省略声明,VSCode会发现类型错误,编辑器会捕获类型错误,但它不会编译,(error TS2304: Cannot find name 'Stripe'.)可能因为我没有importStripe的声明.
有没有办法提示TypeScript它应该使用DefinitelyTyped中的类型来捕获类型错误,而不导入Stripe库本身？
编辑:我收回我所说的关于不认为这是Angular特定的内容.我现在认为这可能与角度编译过程有关.
我在使文件下载在我的应用程序中工作时遇到了一些麻烦。要下载文件，我正在使用API进行新的调用，以将数据输入到应用程序中。我已经使用Postman测试了此API，并且由于可以通过调用下载文件，因此它似乎可以正常工作。
不幸的是，在将其实现到Angular应用程序时遇到了一些问题。当我调用下面的函数时，由于无法打开，因此我得到的是“损坏”文件。我已经检查了与我的问题有关的其他问题/解决方案，但是在尝试了大多数问题/解决方案后，我没有得到进一步的解决。
我服务中的电话：
DownloadFile (companyId: string, fileId: string, extension: string, fileName: string): Observable<Blob> {
const options = { responseType: 'blob' as 'json' }
return this.http.get<Blob>(this.baseApiUrl + this.baseTag + "?companyId=" + companyId + "&fileId=" + fileId + "&extension=" + extension + "&fileName=" + fileName, options)
}
使用服务调用：
this.data.DownloadFile(this.company.id, selectedItem.id, this.getFileNameWithoutExtension(selectedItem.fileName), this.getExtensionFromFileName(selectedItem.fileName))
.subscribe(resultBlob =>
{
//Success
console.log('start download:', resultBlob);
var blob = new Blob([resultBlob], { type: "application/pdf" } );
saveAs(blob, selectedItem.fileName);
},
error => {
//Error
console.log(error);
});
我没有看到这段代码有什么问题。
我通过以下方式升级到Angular 7.1.0：
"@angular/animations": "^7.1.0",
"@angular/cdk": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/material": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0"
我正在使用Angular Material Expansion Panels，它们最初通过[expanded] =“ false”扩展为false。
扩展面板的主体在几毫秒内可见。从扩展到未扩展似乎只是一小段路程。有人有同样的问题吗？
<mat-expansion-panel-header>
<mat-panel-title>
<div class="NumberAccordionContentWrapper__centered">
<h2 [class.NumberAccordion__notExpanded]="!isExpanded">{{ headline }}</h2>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="NumberAccordionContentWrapper__centered">
<ng-template tbHost></ng-template>
</div>
我需要获取所选材料下拉列表的文本<mat-select>而不是其值：
<ng-container matColumnDef="fr">
<th mat-header-cell *matHeaderCellDef> Family Rel. </th>
<td mat-cell *matCellDef="let element; let i = index;">
<div [formGroupName]="i">
<mat-form-field color="warn" appearance="outline">
<mat-label>Family Relation</mat-label>
<mat-select #familyRelation (selectionChange)="onChange(element, i, 'hh')" id="family_relation"
formControlName="fr" placeholder="Family Relation">
<mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id">
{{familyRelation.family_relation_type}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</td>
</ng-container>
这是我正在尝试做的事情：
@ViewChild('familyRelation') familyRel: ElementRef;
并在下拉列表的更改选择上：
onChange(data, i, type) {
let c = this.familyRel.nativeElement.innerText;
console.log(c)
}
我有以下错误：
错误TypeError：无法读取未定义的属性'innerText'，位于
当我删除时innerText，控制台值为：
未定义
我需要什么，你可以在看stackblitz，如果我chosed Parent，我想Parent成为一个变量，而不是1这是它id。 …
我创建了一个小服务，可以在其中存储路线更改。
import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Injectable()
export class RouteState {
private previousUrl: string;
private currentUrl: string;
constructor(private router: Router) {
this.currentUrl = this.router.url;
router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.previousUrl = this.currentUrl;
this.currentUrl = event.url;
};
});
}
public getPreviousUrl() {
return this.previousUrl;
}
}
但是每次路由更改时，vars currentUrl和previousUrl都是未定义的。难道我做错了什么？
https://stackblitz.com/edit/angular-mqqvz1
在Angular 7 App中，我创建了一个带有<input>字段的简单组件。
当我使用键盘更改输入值时，我希望该值的格式设置为onBlur。-在最小的示例中，我只想向其中添加字符串“ EDIT”。
这基本上是有效的：
但是， 当我键入“测试”-模糊（有效）并再次键入“测试”时，它将不再起作用！
该onInputUpdate()功能全被调用（你可以看到它在控制台日志），变量inputValue被更新（你可以看到它的组件{{inputValue}}），但是输入值不会改变！
我希望它是“测试编辑”，但它保持“测试”。
当我键入另一个字符串时，它可以工作，但是连续两次在同一字符串中输入却不起作用。这是为什么？我怎样才能解决这个问题？
component.html
{{inputValue}} <br />
<input type="text"
[ngModel]="inputValue"
(ngModelChange)="onInputUpdate($event)"
[ngModelOptions]="{ updateOn: 'blur' }"/>
component.ts
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
inputValue = "teststring";
constructor(
private changeDetectorRef: ChangeDetectorRef,
) {}
public ngOnInit() {
this.inputValue = "initial";
}
public onInputUpdate(inputValue: string) …angular-ngmodel angular-components angular angular-changedetection angular7
我最近开始将Angular 7.2.0应用程序转换为Angular通用应用程序。该应用程序已成功渲染了服务器端，并在快速的PC和Internet连接上相当快速地传输了状态，但不幸的是，直到交出该页面后，渲染的页面仍缺少通常从API提取的任何数据。
我已将serverURL标记从服务器添加到提供的令牌中，并且在呈现服务器端时，所有http请求均使用完全限定的url进行。但是，这似乎无关紧要，因为所有http调用都在完成之前被取消！我的服务器未显示对api端点的调用，并且客户端记录了错误{}（[Error]默认情况下显示为）。
我正在使用TransferStateModule和TransferHttpCacheModule，但是到目前为止，仍然没有任何效果。似乎快速引擎渲染将不会等待异步http调用。它会影响ngOnInit组件的http调用constructor，服务的s以及任何in resolver，因此我不知道如何获取数据。
对于诸如配置数据之类的事情，我将必要的字段作为令牌注入，并在服务器端渲染中检查该令牌，但是我无法对应用程序中的所有数据执行此操作。
以下是我的服务器和应用程序模块的相关部分
app.ts（节点快速服务器）
app.get('*.*', express.static(APP_CONFIG.client_root, {maxAge: 0}));
// Render Angular Universal
if (APP_CONFIG.universal) {
// Our index.html we'll use as our template
const templateFile = HelpersService.tryLoad(join(APP_CONFIG.client_root, './index.html'));
const config = configService.getConfig();
const template = templateFile.toString();
const win = domino.createWindow(template);
const fakeanimation = {
value: () => {
return {
enumerable: true,
configurable: true
};
},
};
global['window'] = win; …express server-side-rendering angular-universal angular angular7
我有一个登录页面和一个仪表板组件。我的问题是，当我从仪表板显示在登录页面下方的页面登录时，它没有重定向为新页面。如何在angular 7中实现呢？任何帮助都会有所帮助'。谢谢！！
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Shopping-cart';
user = []
users = []
public Candidate = []
public showWhen:boolean = false;
constructor(private _router: Router){}
authenticateLogin(user){
let authUser = JSON.parse(localStorage.getItem('auth'))
console.log(user);
if(user.mail === authUser[0] && user.password === authUser[1]){
this.showWhen = true;
console.log("Logged in Successfully");
this._router.navigate(['dashboard']);
} else {
console.error("Invalid email and password");
}
}
}
这是我的路由模块
app-routing.module.ts
import …我对变量声明有些困惑.
什么意味着英雄$
Angular 4
export class HeroSearchComponent implements OnInit {
heroes: Observable<Hero[]>;
private searchTerms = new Subject<string>();
constructor(
private heroSearchService: HeroSearchService,
private router: Router) {}
Angular 7+
export class HeroSearchComponent implements OnInit {
heroes$: Observable<Hero[]>;
private searchTerms = new Subject<string>();
constructor(private heroService: HeroService) {}
// Push a search term into the observable stream.
search(term: string): void {
console.log(term);
this.searchTerms.next(term);
}
我在角度7 ver中有混淆,其中英雄被赋予$ variable.
我试图从var中删除$符号然后代码不起作用.
任何建议都是最受欢迎的
我已经开始了angular 7项目，并尝试在angular.json上配置“路径映射”以从中更改导入方式：
import { environment } from '../../../environments/environment';
对此：
import { environment } from '@environments/environment';
我已经在根级别tsconfig.json文件中完成了此配置：
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environments/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
但是我在cli上也遇到这个错误
ERROR in src/app/errors/not-foud/not-found.component.ts(2,29): error TS2307: Cannot find module '@environments/environment'
有什么我想念的吗？