Question

我有一个模式工作在我正在处理的示例todos应用程序中，但是＆＃39; x＆＃39;在右上角没有正确显示。

控制台发出错误，说它无法找到localhost：3000 / assets / icons {etc ...}但该项目中的目录存在于localhost：3000 / bower_components / salesforce-lightning-design-系统/ assetx {等}。见屏幕..

想知道我怎么能指向正确的地方？它没有在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模式窗口不显示＆＃39; x＆＃39;关闭选项

2 个答案: