Angular 4 中刷新页面和使用 routerLink 导航时的不同行为

Question

我正在尝试创建一个服务来处理一些自定义浮动操作按钮。 我的目标是能够在组件的 HTML 中定义按钮，以及使用可注入服务动态添加、修改、更新和删除它们。

以下代码在直接使用地址栏导航到页面时有效。但是，当使用链接（使用 [routerLink]）导航到同一页面时，它不起作用。

@Injectable()
export class ActionButtonService {

    constructor( private element: ElementRef ) {
    }

    private container: HTMLElement;

    private getContainer = function getContainer(){
        if ( this.container == null ) {
            let foundContainer = document.getElementById( "actions" );
            if ( foundContainer != null ) {
                this.container = foundContainer;
            } else {
                let createdContainer = document.createElement( "div");
                createdContainer.setAttribute( "id", "actions" );
                this.element.nativeElement.parentElement.appendChild( createdContainer );
                this.container = createdContainer;
            }
        }

        return this.container;
    }

    public addAction = function( icon: string, title: string, onclick, id: string = null ) {
        let container = this.getContainer();

        let newButton = document.createElement( "a" );
        newButton.title = title;
        if ( id != null ) newButton.id = id;
        newButton.innerHTML = "<md-icon class=\"material-icons mat-icon\">"+ icon +"</md-icon>";
        newButton.onclick = onclick;
        container.appendChild( newButton );
    }
}

直接导航到页面时，我可以看到#actions 元素。通过使用链接进行放大时，#actions 元素无处可见。

有没有更好、更可靠的方法来动态添加这些类型的按钮？ 我需要按钮位于根组件（当前活动的路由）中，以便在导航 UI 时正确换出它们，以便我能够在每个组件的 HTML 中定义按钮。

Answer 1

以这种方式创建按钮和 div 是一个非常非常糟糕的主意，你不能像你正在做的那样修改 DOM。

但你应该这样做：

• 定义一个ButtonComponent类

• 将其定义为入口组件 app.module.ts 文件

• 然后动态创建一些组件，使用下一个代码：

  let factory = this.componentFactoryResolver.resolveComponentFactory(ButtonComponent); this.componentRef = this.other.createComponent(factory);

看看这个链接：How to place a dynamic component in a container

Answer 2

您可能实际上并不想这样做。

我不确定我是否掌握了您的要求。我能想到动态插入按钮的唯一原因是您是否允许您的用户定义按钮，这似乎不太可能，如果您允许他们将 javascript 代码插入到 onclick 中，这可能是一种非常糟糕的做法。

你有一组有限的按钮吗？为什么不创建一个包含所有按钮的组件，然后使用 *ngIf 来确定它们是否实际呈现？