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

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

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

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

Answer 2

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

但你应该这样做：

定义ButtonComponent类
将其定义为entryComponent app.module.ts文件
然后动态创建一些组件，使用下一个代码：

let factory = this.componentFactoryResolver.resolveComponentFactory（ButtonComponent）; this.componentRef = this.other.createComponent（factory）;

查看此链接：How to place a dynamic component in a container

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

2 个答案: