我们有一个 Angular 子表单,通过 Valuechanges 发出值。在父组件中,如果子组件的新邮政编码值与以前的邮政编码值不同,我们希望运行任务。
现在,我们正在创建一个变量来存储以前的邮政编码。
有没有更干净的方法来使用输出来执行此操作?我知道输入的 NgOnchanges,我们可以使用changes.previousValue 跟踪之前的更改。
好奇输出值变化是否有类似的情况?
儿童表格:
public addressSub = new Subscription();
public editAddressForm: FormGroup;
@Output addressFormChange = new EventEmitter<any>();
this.addressSub.add(this.editAddressForm.valueChanges.subscribe(data=> {
this.addressFormChange.emit(this.editAddressForm);
})))
Run Code Online (Sandbox Code Playgroud)
父组件:
在Parent中,它是订阅的。
public addressFormChangeEvent(addressFormEvent){
this.addressMailingForm = addressFormEvent;
if (this.addressMailingForm.get('zipCode') != previousZipCode) {
doSomethingetc();
}
previousZipCode = this.addressMailingForm.get('zipCode');
}
Run Code Online (Sandbox Code Playgroud)
Angular 库中是否有一些东西可以通过 ValueChanges 订阅查看以前的值?
我正在尝试在我的 Angular 8 应用程序中设置 Pendo。然而,他们的文档似乎已关闭。示例脚本与 Pendo 控制面板中提供给我的实际脚本不匹配。此外,他们的 YouTube 演练已有 4 年历史,看起来像是为 Angular JS 编写的。
我按照位于https://support.pendo.io/hc/en-us/articles/360031862272-Installation-for-Single-Page-Frameworks
我将脚本的第一部分放在 index.html 页面上的结束<body>标记之前。
然后我将其放入pendo.initialize我的授权组件中。
然而,这并没有奏效。我在浏览器控制台中收到错误 TypeError:“pendo.initialize(...) 不是函数” 。
所以我联系了支持人员,他们建议我pendo.initialize使用 ngZone 在 Angular 之外运行。
有谁知道需要修改什么才能初始化 pendo 而不会出现未定义的错误?
这就是我的结局。
索引.html
...
<script>
(function (apiKey) {
(function (p, e, n, d, o) {
var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];
v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; for (w = 0, x …Run Code Online (Sandbox Code Playgroud) 使用翻译服务时我有一个非常奇怪的行为。我这样配置翻译器:
export class AppComponent implements OnInit {
constructor(
private translateService: TranslateService,
angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
angulartics2: Angulartics2,
router: Router,
private googleAnalyticsService: GoogleAnalyticsService,
) {
translateService.setDefaultLang('en');
translateService.use('en');
}
Run Code Online (Sandbox Code Playgroud)
和我的 HomeComponent :
export class HomePageComponent implements OnInit {
constructor(
private seoService: SeoService,
private translateService: TranslateService
) {
}
ngOnInit() {
this.addPageMeta();
console.log('Add Page Meta');
}
addPageMeta() {
const title = this.translateService.instant('seo.home.title');
const meta: SeoMeta = {
url : '/home',
title: title,
description: this.translateService.instant('seo.home.description'),
};
this.seoService.setPageTitle(title);
this.seoService.addMeta(meta);
}
}
Run Code Online (Sandbox Code Playgroud)
核心.module.ts:
TranslateModule.forRoot({
loader: {
provide: TranslateLoader, …Run Code Online (Sandbox Code Playgroud) 它一直工作到 Angular 7,现在更新后它会抛出未知元素的错误。共享模块会发生这种情况。
可重现的代码: - https://stackblitz.com/edit/angular-ivy-pb3eea
所以我有一个父组件“Parent”,子组件在“Parent”的路由器内使用 - “Child”,一个共享组件在父组件和子组件内部使用 - “Shared”
所以我已经导入了父模块和子模块。(与使用惰性模块一样),在父级中它可以工作,但在子级中则不起作用。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestChildRoutingModule} from './test-child.routing.module';
import { SharedModule } from '../shared/shared.module';
@NgModule({
declarations: [
],
imports: [
CommonModule,
SharedModule,
TestChildRoutingModule
],
exports: [
]
})
export class TestChildModule { }
Run Code Online (Sandbox Code Playgroud) 我正在使用 Angular 8。我正在读取 svg 文件,并找到样式为中风的元素:无。然后,只要有人将鼠标悬停在该元素上,就会打开一个对话框。对话框正在打开,但当我单击外部或关闭按钮时它没有关闭。
我尝试了按钮 id="btn" 的相同对话框,它成功关闭。
没有错误出现。
main.component.html
<object id="svg-object" data="assets/svg/xxx.svg" type="image/svg+xml"></object>
<button mat-button id="btn">Launch dialog</button>
Run Code Online (Sandbox Code Playgroud)
主要组件.ts
ngOnInit() {
this.myfunction();
$('#btn').mouseover(() => {
this.openDialog();
});
}
openDialog() {
const dialogRef = this.dialog.open(DialogBoxComponent, {
height: '100px',
width: '450px',
});
}
myfunction() {
const component = this;
const mySVG: any = document.getElementById('svg-object');
mySVG.addEventListener('load',() => {
svgDoc = mySVG.contentDocument;
$(svgDoc).find('path').css('fill','fill-opacity','fill-rule','stroke').each(function() {
const style = $(this).attr('style');
if($(this).attr('style').includes('stroke:none')) {
$(this).mouseover(() => {
component.openDialog();
});
}
});
}, false);
}
Run Code Online (Sandbox Code Playgroud)
DialogBoxComponent.ts
constructor(public dialogRef: MatDialogRef<MainComponent>) …Run Code Online (Sandbox Code Playgroud) 我具有将请求从前端连续发送到后端的功能。所以我添加了如下代码。
我想以第一个请求立即发出然后在两分钟后发出的方式实施。
但使用下面的代码并根据间隔的定义,它将在两分钟后发送第一个请求。
this.getData = Observable.interval(2 * 60 * 1000)
.pipe(flatMap(() => this.service.getData(b, b, b, b, b, b))).subscribe();
Run Code Online (Sandbox Code Playgroud)
我不想通过先添加请求然后添加上述代码来重复代码,也不想通过任何其他方式来完成它。
是否可以在 Angular 8 中使用自定义组件作为工具提示?
如果不直接对 mat-tooltip 进行样式设置,我想知道在使用该指令时是否可以使用自定义组件来显示为工具提示。就像“显示工具提示时,显示我的组件”。
能做到吗?
我已经实现了 mat-multi-select 选项。我有搜索功能,可以一次选择多个选项。当我单击“生成”按钮后选择后,我想清除所有选择。我可以清除搜索栏中的值,但如果打开多选下拉列表,值仍会被选中。我怎样才能清除这些值。
HTML 代码
<mat-select [formControl]="cMultiCtrl" [multiple]="true" required (selectionChange)="selectionChange($event)">
<mat-option>
<ngx-mat-select-search placeholderLabel="Search" noEntriesFoundLabel="No Matching Value Found" [formControl]="cMultiFilterCtrl"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let val of filteredCMulti | async" [value]="val.value">
{{val.name}}
</mat-option>
</mat-select>
// the button on click of which I want to clear everything post API call
<button mat-raised-button (click)="generate()" class="download-button">Generate
</button>
Run Code Online (Sandbox Code Playgroud)
TS代码
public filteredCMulti: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
public cMultiCtrl: FormControl = new FormControl();
ngOnInit() {
this.filteredCMulti.next(this.cvalues.slice());
this.cMultiFilterCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterBanksMulti();
});
}
ngAfterViewInit() {
this.setInitialValue();
}
ngOnDestroy() { …Run Code Online (Sandbox Code Playgroud) 是否可以使用单个条件添加多个类?[ng-class]
像这样的东西:
<div [ngClass]="Cond ? 'class1, class2' : 'class3, class4'"></div>
Run Code Online (Sandbox Code Playgroud) Angular v8刚刚发布。尽管它大部分是向后兼容的,但还是有一些重大变化。
根据Angular的Changelog,一项核心更改是(我引用):
还指出,在大多数情况下,只需设置即可解决问题{ static: false }。
@ViewChild('selectorName', { static: false }) varName: any;
Run Code Online (Sandbox Code Playgroud)
我的问题是,何时应将此属性(静态)设置为true?以及如何影响我的申请???
angular8 ×10
angular ×8
typescript ×4
angular9 ×1
html ×1
jquery ×1
mat-dialog ×1
mouseover ×1
ng-class ×1
observable ×1
pendo ×1
rxjs ×1
tooltip ×1
viewchild ×1