Question

我在这里处理此示例： https://www.telerik.com/kendo-angular-ui/components/notification/content/

在下面的代码中，在show()函数中，我想将数据传递给CustomComponent。这可能吗？

import { Component, Output, Input, EventEmitter } from '@angular/core';
import { NotificationService, NotificationRef } from '@progress/kendo-angular-notification';


@Component({
    selector: 'custom-component',
    template: `
      <span>{{ message }}</span>
      <button class="k-button k-outline" (click)="ignoreNotification($event)">IGNORE</button>
    `
  })

export class CustomComponent {
    @Input() customData; // <--- DATA FROM PARENT. MY CODE
    @Output() public ignore: EventEmitter<any> = new EventEmitter();

    public message = 'Weather: Chance of rain today. There is a 40 percent chance of rain, mainly before 1 p.m.';

    public ignoreNotification(event: Event): void {
        event.preventDefault();
        this.ignore.emit();
    }

    // I'd like to obtain the data here when I go to use it.
    private myFunc() {
       const getsData = this.customData;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <p>Show Custom Component rendered into warning type Notification</p>
        <button class="k-button" (click)="show()">Show</button>
    `
})
export class AppComponent {
    constructor(private notificationService: NotificationService) {}

    public show(): void {
        const notificationRef: NotificationRef = this.notificationService.show({
            content: CustomComponent,
            animation: { type: 'slide', duration: 200 },
            position: { horizontal: 'right', vertical: 'top' },
            type: { style: 'warning', icon: false },
            closable: false
        });

        if (notificationRef) {
            notificationRef.content.ignore
                .subscribe(() => notificationRef.hide());
        }
    }
}

Answer 1

创建公共属性并使用内容进行设置，而不是使用Input。

带有邮件属性的示例

内部注入的组分：

 public message: string;

使用notificationRef上的内容进行设置：

 if (notificationRef) {
  const notificationContent = notificationRef.content as any;
  notificationContent.message = 'test';
}

将参数传递给自定义Kendo UI Notification组件

1 个答案: