标签: angular5

我在 Angular5 应用程序中到处使用 Angular-Material 库，但我不希望在我的标记中使用它的指令/组件/类名称，我更喜欢与外部库保持不可知的关系。但是，我尝试做这样的事情：

import { Directive, 
         ElementRef, 
         Renderer, 
         Renderer2 }  from "@angular/core";

import { MatButton }  from "@angular/material";
import { OnInit }     from "@angular/core";
import { Platform}    from "@angular/cdk/platform";
import {FocusMonitor} from "@angular/cdk/a11y";

@Directive({
  selector: '[my-button]'
})
export class MyButtonDirective extends MatButton {

  ngOnInit(): void {

  }

  constructor(renderer: Renderer2, elementRef: ElementRef, _platform: Platform, _focusMonitor: FocusMonitor) {
    super(renderer, elementRef, _platform, _focusMonitor);

  }
}

但是当我应用该my-button属性时，它似乎没有任何效果。即使console.logs从指令内部构造函数/onInit 也不会被打印。我不太确定我做错了什么，因为我以前从未在 Angular 中使用过指令。

感谢 这篇非常有见地的文章，我能够使用从端点获取的动态模板动态创建组件，但是这些组件是使用 RuntimeCompiler 在运行时编译的，在使用 AoT 编译（又称生产时）时会禁用该编译器。

有人知道适用于 AoT 的类似解决方案吗？

我的要求是：

• 在运行时获取组件的模板
• 将来自端点的一些数据存储到组件的属性中
• 让 Angular 解析模板，尤其是在包含来自端点的数据的属性上工作的包含的绑定

我有一个名为loading( 的变量false位于开头，是一个布尔变量）的变量和一个按钮，其文本取决于该变量。

我写了一个方法来为我做到这一点，如下所示：

changeBtnTxt() {\n  this.loginBtn = this.loading ? \'please wait\':\'login\';\n}\n

现在，我想知道如何观察该变量的变化以使用RxJSObservable 观察该变量的变化以触发此方法。

这是我的组件

export class LoginFormComponentComponent implements OnInit {\n  loading = false;\n  loginBtn = \'\xd9\x88\xd8\xb1\xd9\x88\xd8\xaf\';\n  loginModel: LoginFormModel = new LoginFormModel();\n\n  @ViewChild(\'loginForm\') form: any;\n\n  constructor(private service: LoginFormService,\n    private basicView: BasicViewService) {}  // inject services to our component\n\n  ngOnInit() {}\n\n  login() {\n    this.loading = true;\n    this.changeBtnTxt(); // I want to remove this line and do the changes just by above …

收到错误“无法解析主页的所有参数：([object Object], ?, [object Object], [object Object])” 。我正在尝试使用 angularfire 访问我的数据库 - 用户在登录时通过电子邮件发送 toastcontroller 消息。函数名称：“IonViewWillLoad()”

所有项目： https: //github.com/AndriusdevLa/test

那是我的主页：

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { DetailPage } from '../detail/detail';
import { ToastController } from 'toast-controller';
import { AngularFireAuth } from "angularfire2/auth";
import { User } from '../../app/modals/user';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
//public shouldReorder = false;
  user = {} as User;

  constructor(private aFAuth: AngularFireAuth,
              private toastCtrl …

在我们的 Angular 5 应用程序中，我们使用 Microsoft Graph 从邮箱检索邮件消息，然后发送回复。为了创建回复，我们使用 REST API：

https://graph.microsoft.com/v1.0/me/messages/{message ID}/createReply

这将创建一个时区为 UTC 的回复，但我们希望它是 GMT+1。例如，在邮件正文中写道：

发件人： Melissa van Dijk
发送： 2018 年 2 月 23 日星期五上午 9:51:49（时间戳错误）
收件人： Melissa van Dijk
主题：见面吃午餐？

我们检查了 Office 365 邮件帐户中的设置，并指定我们的本地时区为 GMT+1（布鲁塞尔、阿姆斯特丹...）。
（通过 Outlook 网络邮件回复时，我们会得到正确的时间戳）。

这是一个错误还是我们必须自己纠正这个时间戳？或者我们是否需要通过 REST 调用以某种方式传递时区？

提前致谢！

我在 ag-grid 中使用主/详细信息。我想要在所有行之后的详细部分中有一个保存按钮。我可以使用模板来做到这一点，但它不会触发事件。我认为它只是一个模板，不适用于活动。您能否建议我如何在详细部分添加按钮

这是我的代码

columnDefs: [
    {
        headerName: "CompanyName",
        field: "CompanyName",
        cellRenderer: "agGroupCellRenderer"
    }
],
groupDefaultExpanded: 0,
detailRowHeight: 200,
detailCellRendererParams: {
    detailGridOptions: {
        columnDefs: [                            
                    {
                        headerName: "Name",
                        field: "Name",
                        cellRenderer: "agGroupCellRenderer"
                    },
                    {
                        headerName: "Age",
                        field: "Age",
                        suppressFilter: true,
                    },
                    {
                        headerName: "Gender",
                        field: "Gender",
                        suppressFilter: true,
                    }
        ],
        onGridReady: function (params: any) {
            params.api.sizeColumnsToFit();
        }
    },
    getDetailRowData: function (params: any) {
        params.successCallback(params.data.ChannelComponentsVm);
    },
      template:
      '<div style="height: 100%;">' +
      '<div ref="eDetailGrid" style="height: 90%;"></div>' +
      '<div style="height: 10%;"> <button (click)="saveEmployeeDetails()">Save</button> …

当我单击按钮时，我将“copyRow”元素发送到“copyItem”方法。我将“copyItem”元素与“Typescript”文件中的“item”变量进行均衡。

当我想显示“[object htmldivelement]”时，这个“html 文件中的项目”变量将作为输出。

创建.component.html

<div class="questions">
    <div class="form-group copy-row" #copyRow>
       <label>Question</label>
       <input type="text" class="form-control" placeholder="Question title">
    </div>
    {{ item }}
</div>
<button type="button" class="btn btn-primary" (click)="copyItem(copyRow)">Add</button>

创建组件.ts

  item;

  constructor() { }

  ngOnInit() {
  }

  copyItem(row) {
    this.item = row;
  }

编辑

我的目标是做一个调查项目。当我单击“添加”按钮时，相同的“#copyRow”元素将显示在 {{ item }} 部分中。但是，我得到了类似于第二个链接的输出。

1： http: //prntscr.com/j1ncp1 2： http: //prntscr.com/j1nd19

我想创建一个.ts包含我的数据模型的文件。每个数据模型都映射到一个JSON我将从服务器发送或接收的数据。例如。对于用户个人资料，Json 是

 {
  "firstname" : "d",
  "lastname" : "d",
  "email" : "dd",
  "password" : "d"
}

对于上面的内容，我想创建一个类，如下所示

export class UserProfile {

  constructor (public firstname:string,
               public lastname:string,
               public email:string,
               public password:string){}
}

服务器可能发送的另一个 JSON 是

{
result:"success"
addition-info:"something"
}

上面的类是

export class Result{

  constructor (public result:string,
               public additionalInfo:string){}
}

Angular 中是否有关于如何为数据模型创建文件的最佳实践？我可以创建一个.ts文件BackendApiModels.ts来存储所有类，还是应该.ts为每个数据模型创建一个文件？我什至不知道是否可以创建一个.ts可以包含多个类的文件，例如

后端API

 export class UserProfile {

      constructor (public firstname:string,
                   public lastname:string,
                   public email:string,
                   public password:string){}
    }

    export class Result{ …

我正在尝试将滑动手势集成到 Angular 材料 2(Angular5) 中。它在桌面上使用鼠标工作。问题是，当我使用移动设备（Chrome）时，它只感知选项卡标签上的手势。

模板代码：

<mat-tab-group mat-scroll-y (swipeleft)="swipe($event.type)" (swiperight)="swipe($event.type)" class="home-tabs" mat-stretch-tabs [(selectedIndex)]="selectedIndex">
    <mat-tab label="Home">
      <ng-template mat-tab-label>
        <mat-icon>home</mat-icon>
      </ng-template>
      <app-my-cars></app-my-cars>
    </mat-tab>
    <mat-tab label="Registered Cars">
      <ng-template mat-tab-label>
        <mat-icon>directions_car</mat-icon>
      </ng-template>
      <app-registered-cars></app-registered-cars>
    </mat-tab>
    <mat-tab label="Unregistered Cars">
      <ng-template mat-tab-label>
        <mat-icon>directions_car</mat-icon>
      </ng-template>
      <app-unregistered-cars></app-unregistered-cars>
    </mat-tab>
  </mat-tab-group>

组件代码：

export class DashboardHomeComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
  selectedIndex: number = 0;
  totalTabs: number = 3;
  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };
  swipe(eType) {
    console.log(eType)
    if(eType === 'swipeleft' && this.selectedIndex < this.totalTabs){
      this.selectedIndex …

我无法为表单中的“datetime-local”元素赋值。

模板中的代码：

打字稿文件中的代码：

let dateTime : Date = new Date();

this.testForm = this.formBuilder.group({    
  'dateTime': new FormControl(dateTime),
});

结果：

使用打字稿将日期和时间分配给 datetime-local 的正确方法是什么