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

Posted 2023-03-13

【中文标题】Angular 4 中刷新页面和使用 routerLink 导航时的不同行为

【英文标题】：Different behavior in Angular 4 when refreshing the page and navigating using routerLink

【发布时间】：2018-01-10 02:02:24

【问题描述】：

我正在尝试创建一个服务来处理一些自定义浮动操作按钮。 我的目标是能够在组件的 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 中定义按钮。

【问题讨论】：

“它不起作用”没有解释问题是什么。

感谢您的快速回复。我添加了一些额外的信息；希望这会有所帮助。我对路由的工作原理没有很深入的了解，我认为这可能与此有关。很难解释，对此我深表歉意

【参考方案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

【讨论】：

感谢您的建议。我将研究实施它，并让你知道它是如何进行的。 （抱歉回复晚了；我一直在努力解决 Angular cli 中的编译问题）

【参考方案2】：

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

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

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

【讨论】：

按钮几乎可以是任何东西，而且会有很多。动态控制的用例是我有一个步进器。步进器需要一个后退和前进按钮。为了保持一致性，这些应该看起来与其他主要操作相同，因此需要使用相同的样式和属性。我为步进器定义动作的方式不同，因为我不能在步进器元素之外定义它们（我在其中定义主要动作）同时坚持 DRY 原则