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

问题

I have a modal working in an example todos app that i'm working on, however the 'x' in the top right hand corner isn't displaying correctly.

The console is throwing an error saying it can't find localhost:3000/assets/icons{etc...} but that directory in this project exists at localhost:3000/bower_components/salesforce-lightning-design-system/assetx{etc}. See screeny..

Wondering how I can get that to point to the right place? It's not defined in the html markup...

Markup:

<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;
    }
 }

回答1:

You have to configure the path for your assets like this:

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

回答2:

In app.module.ts add the below code

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

来源：https://stackoverflow.com/questions/41918616/ng-lightning-modal-window-not-displaying-x-on-the-close-option

标签

ng-lightning