标签: angular8

将以前的值与输出发射器和 ValueChanges 进行比较

我们有一个 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 订阅查看以前的值?

typescript angular angular-reactive-forms angular8

4
推荐指数
1
解决办法
6756
查看次数

如何在 Angular 8+ 中实现 Pendo

我正在尝试在我的 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)

typescript angular angular8 pendo

4
推荐指数
1
解决办法
7876
查看次数

翻译服务在加载页面上不起作用

使用翻译服务时我有一个非常奇怪的行为。我这样配置翻译器:

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)

typescript angular-translate angular angular8

4
推荐指数
1
解决办法
1万
查看次数

Angular 9 - 不是已知元素

它一直工作到 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-routing angular angular8 angular9

4
推荐指数
1
解决办法
2936
查看次数

如何关闭 Angular 材质对话框?

我正在使用 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)

jquery mouseover angular8 mat-dialog

4
推荐指数
1
解决办法
1万
查看次数

Angular 8:如何使用 Observable 的时间间隔立即发送 http 请求

我具有将请求从前端连续发送到后端的功能。所以我添加了如下代码。

我想以第一个请求立即发出然后在两分钟后发出的方式实施。

但使用下面的代码并根据间隔的定义,它将在两分钟后发送第一个请求。

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)

我不想通过先添加请求然后添加上述代码来重复代码,也不想通过任何其他方式来完成它。

observable rxjs angular angular8

4
推荐指数
1
解决办法
1008
查看次数

在 Angular 中使用自定义组件作为工具提示

是否可以在 Angular 8 中使用自定义组件作为工具提示?
如果不直接对 mat-tooltip 进行样式设置,我想知道在使用该指令时是否可以使用自定义组件来显示为工具提示。就像“显示工具提示时,显示我的组件”。
能做到吗?

tooltip angular8

4
推荐指数
1
解决办法
1万
查看次数

Clear mat-select 选择 Angular 材质

我已经实现了 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)

html typescript angular-material angular angular8

4
推荐指数
1
解决办法
2万
查看次数

[ng-class]使用单个条件添加多个类

是否可以使用单个条件添加多个类[ng-class]

像这样的东西:

<div [ngClass]="Cond ? 'class1, class2' : 'class3, class4'"></div>
Run Code Online (Sandbox Code Playgroud)

ng-class angular angular8

4
推荐指数
1
解决办法
4875
查看次数

Angular v8-@ViewChild静态true或false

Angular v8刚刚发布。尽管它大部分是向后兼容的,但还是有一些重大变化。

根据Angular的Changelog,一项核心更改是(我引用):

“在Angular版本8中,要求所有@ViewChild和@ContentChild查询都具有'static'标志,以指定查询是'static'还是'dynamic'。”

还指出,在大多数情况下,只需设置即可解决问题{ static: false }

@ViewChild('selectorName', { static: false }) varName: any;
Run Code Online (Sandbox Code Playgroud)

我的问题是,何时应将此属性(静态)设置为true?以及如何影响我的申请???

viewchild angular angular8

3
推荐指数
2
解决办法
1015
查看次数