标签: angular7

如何在 Angular 7 中为 Angular MaterialmatSlideToggle按钮禁用波纹效果？

我已经尝试
<mat-slide-toggle disableRipple></mat-slide-toggle>
过并且
<mat-slide-toggle [disableRipple]="true"></mat-slide-toggle>.

它曾经在 Angular 6 中工作，但升级到 Angular 7 后就停止工作了。

我只是好奇当我们在当前页面中使用 router.navigate 时会调用哪些生命周期钩子，比如说重新加载页面。

constructor(private router: Router) { }
reload () {
    this.router.navigate(['/currentpage']);
} 

我有一个用 PHP 创建的“api rest”，该服务返回一个 JSON，其中包含“header”、“body”、“get”、“pos”参数，无需任何类型的验证即可接收。现在我已经以角度创建了一个服务来与“api rest”连接，好吧，我遇到的问题是我想将参数作为“BODY”发送，但我不知道如何，我一直在调查但我还没有找到形状。是否可以通过 发送“正文” HttpClient.get()？

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServicioService {
  constructor(private http: HttpClient) { }
  getQuery(query: string){
    const url = `http://localhost:8080/servicio/`;

    const headers = new HttpHeaders({
      'Authorization': 'Bearer BQAiaibx-we0RSlZFN29B5TPF4t6egxbuuEsc5ZYZhpamHUhImd5'
    });
    const params = new HttpParams()
    .set('page', '2')
    .append('page', '3')
    .set('sort', 'abc');
    return this.http.get (url, { params, headers}); …

我尝试在 angular7 中使用 ag-grid，我的代码如下所示：

    从 '@angular/core' 导入 { Component, OnInit };
    从 '@angular/common/http' 导入 { HttpClient, HttpHeaders };

    从“ag-grid-angular”导入{AgGridModule}；

    @成分（{
      选择器：'app-top100sp'，
      templateUrl: './top100sp.component.html',
      styleUrls: ['./top100sp.component.css']
    })
    导出类 Top100spComponent 实现 OnInit {


      私有top100url = 'http://resturl';

      私有网格选项；
      私有每页行= 20；

      专用端点；
      私有行数据；
      私有休息数据源；

      私有columnDefs = [
        。
        。
        。
      ];

      构造函数（私有http：HttpClient）{}

      ngOnInit() {
          this.gridOptions = {
              columnDefs: this.columnDefs,
              rowModelType: '无限',
              //数据源：this.restDatasource，
              启用服务器端过滤器：假，
              启用服务器端排序：假，
              分页：真实，
              分页页面大小：this.row_per_page
         };
      }

      网格就绪（$事件）{
          console.log("onGridReady "+$event.api.paginationGetPageSize());
          this.restDatasource = {
              行数：空，
              getRows：函数（参数）{
                  console.log(params.startRow + " 到 " + params.endRow);
                  this.endpoint …

我正在使用元素加载 svg 文件Object，并从 TypeScript 文件中尝试读取和修改 svg（例如动态着色、创建一些 svg 元素以及附加到现有 svg），但遇到以下错误：

Property 'contentDocument' does not exist on type 'HTMLElement'

我正在使用 Angular 7。

在app.component.html中

 <object id="svg1" data="assets/10026_019.svg" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></object>

在 app.component.ts 中

let obj=document.getElementById('svg1');
    let svg2=obj.contentDocument.querySelector("svg");
 let pt = svg2.createSVGPoint();

实际上它在 处显示错误（红线）contentDocument，但是当我运行该应用程序时，即使报告了错误，它也工作正常。

但当我这样做时ng build，它报告了这个问题。

我不确定如何纠正此错误以使构建成功。

如何通过 Ionic 4 选项卡按钮传递参数

    <ion-tabs>
    <ion-tab-bar slot="top" color="light">
      <ion-tab-button tab="tab1">
        <ion-label> Tab 1 </ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab2">
        <ion-label> Tab 2 </ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

在我的 tabsmain.module.ts 中，将每个路由路由为

    const routes: Routes = [
  {
    path: '',
    component: TabsmainPage, children: [
      { path: '', loadChildren: './pages/tab1/tab1.module#Tab1PageModule' },
      { path: 'tab1/:id2', loadChildren: './pages/tab1/tab1.module#Tab1PageModule' },
      { path: 'tab2', loadChildren: './pages/tab2/tab2.module#Tab2PageModule' }},
    ]
  }
];

我想像通过 NavParams 一样传递一些 ID 作为参数请帮助我，如何通过ion-tab-button传递参数

我正在尝试使用 Cypress 和cypress-plugin-snapshots在我的页面上进行 e2e 测试的快照测试。

但我得到了这个错误TypeError: cy.document(...).toMatchSnapshot is not a function。

这是我的配置：

插件/index.js

const { initPlugin } = require('cypress-plugin-snapshots/plugin');

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  initPlugin(on, config);
  return config;
}

支持/index.js

import 'cypress-plugin-snapshots/src/commands';

赛普拉斯.json

{
    "ignoreTestFiles": [
        "**/__snapshots__/*",
        "**/__image_snapshots__/*"
    ]
}

home.spec.js

context('Querying', () => {
    beforeEach(() => {
        cy.server();
        cy.fixture('user.json').as('userJSON');
        cy.route('GET', 'users?id=*', '@userJSON').as('getUser');
        cy.visit('http://localhost:4200/1');
    })

    it.only('LANDING - …

我想获取 base64 字符串并用它来显示图像。
下面是 HTML 文件。我想使用 base64 字符串并在 img 标签中使用它：

<ion-content>
  <ion-card>
      <img src={{imageFileBinary}} />
        <ion-card-header>
            <form>
                <ion-input id="myform" type="file" name="file" (change)="postMethod($event.target.files)"></ion-input>
            </form>
        <ion-card-title>Nick</ion-card-title>
    </ion-card>
</ion-content>

我从 .ts 文件中获取 imageFileBinary。
下面是 .ts 文件：

export class MyprofilePage implements OnInit {


  imageFileBinary;

  userDetails: UserDetails;
  constructor(private profileDetailService: ProfileDetailsService, private httpClient: HttpClient) {}

  fileToUpload;

  getProfileDetails() {
    this.profileDetailService.getUserDetails('email').subscribe((userDetails: UserDetails) => {
      this.imageFileBinary = userDetails.imageFileBinary
    });
  }
  postMethod(files: FileList) {
    this.fileToUpload = files.item(0);
    let formData = new FormData();
    formData.append('file', this.fileToUpload, this.fileToUpload.name);

    this.httpClient.post("http://localhost:8080/uploadFile", formData).subscribe((val)=> {
      console.log(val);
    }); …

我正在开发 Angular7 项目，并遇到完整日历的问题。我想在选项卡上显示日历，但角度完整日历未在选项卡活动时初始化。请参考下面的截图

我正在使用材质选项卡https://material.angular.io/components/tabs/overview，对于完整日历，我已经集成了https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular这个。

代码

约会-Calendar.Component.ts

 export class AppointmentCalendarComponent implements OnInit {

        @ViewChild('calendar', {static: true}) calendarComponent: FullCalendarComponent; // the #calendar in the template


        calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
        calendarWeekends = true;

       calendarEvents: EventInput[] = [{"title":"Dr. Helen Jones 07:20 PM","start":"2019-07-31 19:20:00"},{"title":"Dr. Jonathan 07:20 PM","start":"2019-08-07 19:20:00"}];


      constructor() { }

       ngOnInit() {}


    }

约会.component.ts

<mat-tab-group [selectedIndex]="selectedTab" [disableRipple]="true" animationDuration="0ms">
        <mat-tab label = "List View"> 
             <app-appointment-listing (selectTab)="getOutputval($event)" ></app-appointment-listing>
        </mat-tab>
        <mat-tab label = "Calendar">
           <app-appointment-calendar (selectTab)="getOutputval($event)"></app-appointment-calendar> 
        </mat-tab>
    </mat-tab-group>

约会-calendar.component.html

<div class="card card-box"> …

我有一个 Ionic 4 应用程序，以及带有自定义组件的 Angular 7。在这个组件中，我实现了对事件的订阅。活动发布后，我毫无问题地收到消息。如果我离开该组件并再次返回该组件，如果发布了事件，我会收到该消息两次。似乎同一控制器的前一个实例没有被销毁（如果 ngOnDestroy 被触发 - 我已经插入了一个 console.log）。如果我重复此操作（离开并返回），我会收到 3 条消息，然后是 4 条，依此类推。

所以，我的问题是：该组件是被破坏还是保留在内存中？

我希望每次进入组件时都会有一个新实例，并且所有先前的实例都会被销毁。