小编wor*_*der的帖子

Angular 6 - MatDialog - EventEmitter - 从 MatDialog 将对象共享给父组件

现在能够在两个组件之间进行通信。但不知道如何通过事件发射器从 MatDialog 组件将用户(选定)输入的值作为对象传递给父组件。在这里,我想在单击提交按钮后将选定的选项值和文本区域值作为对象传递。

对话框.html

          <mat-select [(ngModel)]="selectedIssue"  [ngModelOptions]="{standalone: true}">
            <mat-option  [value]="option1">Option AA</mat-option>
            <mat-option  [value]="option2">Option BB</mat-option>
            <mat-option  [value]="option3">Option CC</mat-option>
            <mat-option  [value]="option4">Option DD</mat-option>
            <mat-option  [value]="option5">Option EE</mat-option>
          </mat-select>


         <div>
            <textarea class="mention-reason" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}"></textarea>
        </div>

    <button class="cancel" matDialogClose>Cancel</button>      
    <button class="submit" [mat-dialog-close] (click)="submitUserReason()">Submit</button></span>
Run Code Online (Sandbox Code Playgroud)

对话框.ts

onSubmitReason = new EventEmitter();
    submitUserReason(): void {
        this.onSubmitReason.emit('hello');
    }

    onConfirmClick(): void {
        this.dialogRef.close(true);     
    }
Run Code Online (Sandbox Code Playgroud)

父母.ts

callSupport() {
        const dialogRef = this.dialog.open(customerSupportComponent);
        const subscribeDialog = dialogRef.componentInstance.onSubmitReason.subscribe((data) => {
          console.log('dialog data', data);
          //i can see 'hello' from MatDialog
        });

    dialogRef.afterClosed().subscribe(result => {      
      subscribeDialog.unsubscribe(); …
Run Code Online (Sandbox Code Playgroud)

javascript eventemitter typescript angular-material angular

6
推荐指数
2
解决办法
7924
查看次数

路由问题 - 哈希标记 - Angular 2

我试图将正常的bootstrap模板转换为angular网站.我面临的问题,而路由从一个页面导航到另一个喜欢AboutContact反之亦然.

该模板已经具有以下格式,使用一些css进行平滑滚动hashtag #.

我的app.compo.html

之前: <li><a href="#header">About</a></li>

之后: <li><a routerLink="/about" routerLinkActive="active" href="#header">About</a></li>

<a href="#header" id="btp" class="back-to-top btn-floating waves-effect waves-light btn-large custom-btn">
    <i class="ion-ios-arrow-up"></i>
</a>
Run Code Online (Sandbox Code Playgroud)

app.routing.ts

const routes: Routes = [
{ path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: about, data: { state: 'about'} },
  { path: 'contact', component: contact, data: { state: 'contact'} },
];
export const AppRouting = RouterModule.forRoot(routes, { 
  useHash: true
});
Run Code Online (Sandbox Code Playgroud)

在我点击npm start之后,它在我的控制台中显示如下

** NG …
Run Code Online (Sandbox Code Playgroud)

html javascript typescript angular

5
推荐指数
1
解决办法
451
查看次数

Angular 6 - Renderer2 - 无法显示图像背景

尝试创建用于学习目的的自定义指令。我无法确定为什么 Angular 6 中的 renderer2 不显示图像背景的问题。

我使用的是 cli,因此在 app.module.ts 中注册指令没有问题

@Directive({
  selector: '[bgIMG]'
})
export class MyCustomStyleDirective {
 // private url = "http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg" 

  constructor(elm : ElementRef, renderer2:Renderer2) {
    renderer2.setStyle(elm.nativeElement, 'background-image', 'url ("http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg")')    
   }
}
Run Code Online (Sandbox Code Playgroud)

html

<div bgIMG></div>
Run Code Online (Sandbox Code Playgroud)

哪里错了.? 我也没有发现任何控制台错误。

更新

import { Directive,ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[bgIMG]'
})
export class MyCustomStyleDirective {

  constructor( renderer: Renderer2,  el: ElementRef) {

    renderer.setStyle(el.nativeElement, 'background-image','http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg');
    renderer.setStyle(el.nativeElement, 'font-weight','bold');

   }

}


html
-----

<div class="container">
  <div class="row">
    <div bgIMG>
      <p>some text</p>
    </div>
  </div> …
Run Code Online (Sandbox Code Playgroud)

angular angular6

5
推荐指数
1
解决办法
2811
查看次数

Angular 5 + NodeJS Express - 如何在同一个端口运行?

这可能是重复问题但不能理解如何配置FE和BE一起运行它们.

我已经完成了这个SO线程这个SO线程.但无法理解.

我的Node + Express在4300上运行

app.post('/postData', function(req, res) {
//some worst logics here :)
});
Run Code Online (Sandbox Code Playgroud)

角度5运行在4200.下面是我的FE服务,呼叫后端点

postData(feData) {
        console.log(feData);
        this.http.post('/postData', feData, this.httpHeader).subscribe((data) => {
        });
    }
Run Code Online (Sandbox Code Playgroud)

我尝试的是打开2厘米提示.一个用节点server.js运行server.js,另一个用ng服务运行.

结果===> 404不是fount(不能发帖)

哪里做错了.请指出我正确的方向.在此之后我只想在github.io上托管它

提前致谢.

node.js express angular angular5

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

Angular 6 - 日期管

有人可以告诉如何以角度实现以下格式吗?

预期的:

20JAN2019

现在使用角度默认管道。我越来越喜欢

20/01/2019 使用 {{slotEndDate | 日期:'dd/MM/yyyy'}}

我需要编写自定义管道来获得所需的输出吗?

请分享一些示例或演示 stackblitz。

谢谢

javascript datetime typescript date-pipe angular

3
推荐指数
1
解决办法
4244
查看次数