ng-lightning modal window 在关闭选项上不显示 'x'

Question

我有一个模式在我正在处理的示例待办事项应用程序中工作，但是右上角的 'x' 显示不正确。

控制台抛出错误，提示找不到 localhost:3000/assets/icons{etc...} 但此项目中的目录位于 localhost:3000/bower_components/salesforce-lightning-design-system/assetx{等}。看screeny..

想知道如何让它指向正确的位置？它未在 html 标记中定义...

标记：

<div class="slds-no-flex">
    <button type="button" nglButton="neutral" (click)="open()">New Todo</button>
    <ngl-modal [header]="noHeader ? '' : 'New Todo'" [(open)]="opened" [size]="size" [directional]="directional">
          <div body>
            <!-- form goes in here for adding new todos -->
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="addTodo">Enter Todo</label>
              <div class="slds-form-element__control">
                <input type="text" id="addTodo" class="slds-input" placeholder="Don't forget to..." autofocus=#todoText/>
              </div>
            </div>
          </div>
          <template ngl-modal-footer *ngIf="!noFooter">
            <button class="slds-button slds-button--neutral" (click)="cancel()">Cancel</button>
            <button class="slds-button slds-button--brand" (click)="addTodo($event, todoText)">Save</button>
          </template>
    </ngl-modal>
</div>

todo.component.ts

 import { Component, OnInit } from '@angular/core';
import { TodoService } from '../services/todo.service';
import { Todo } from '../todo';

@Component({
    moduleId: module.id,
    selector: 'todos',
    templateUrl: `./todos.component.html`,
})
export class TodosComponent implements OnInit { 

    todos: Todo[];  
    //properties for modals
    opened: boolean = false;
    size: string;

    noHeader: boolean = false;
    noFooter: boolean = false;
    directional: boolean = true;

    constructor(private _todoService: TodoService) {

    }

    ngOnInit() {
        this.todos = [];
        this._todoService.getTodos()
            .subscribe(todos => {
                this.todos = todos;
            })
    }



    open(size?: string) {
        this.size = size;
        this.opened = !this.opened;
    }

    cancel() {
        this.opened = false;
    }
 }

Answer 1

您必须像这样配置资产的路径：

NglModule.forRoot({
  svgPath: 'bower_components/salesforce-lightning-design-system/assets/icons',
})

Answer 2

在app.module.ts中添加以下代码

  providers: [
    { provide: NGL_ICON_CONFIG, useValue: <NglIconConfig>{ svgPath: 'myPath' } }
  ],

ng-lightning modal window 在关闭选项上不显示 'x'

ng-lightning modal window not displaying 'x' on the close option

ng-lightning