Javascript 制作一个有角度的2按钮组件，将用户带到网页顶部_Javascript_Html_Angularjs_Angular

Javascript 制作一个有角度的2按钮组件，将用户带到网页顶部

javascript html angularjs angular

Javascript 制作一个有角度的2按钮组件，将用户带到网页顶部,javascript,html,angularjs,angular,Javascript,Html,Angularjs,Angular,我的目标是编程一个按钮，让用户在点击时进入网页顶部。我直接在按钮角度组件文件中应用此逻辑，然后通过将其嵌套在主组件下将其包含到网页中。我认为在我连接逻辑时存在时间问题。我已经包括了所有相关的代码片段，如果还有什么我可以提供，以更好地帮助用户回答这个问题，请让我知道哈克：我发现在System.import promise中包装角度组件逻辑会在连接按钮逻辑时引入适当的时间。不知道为什么：/。注意“Button component TypeScript”中的注释代码就是一个例子定义了主组件的ind

我的目标是编程一个按钮，让用户在点击时进入网页顶部。我直接在按钮角度组件文件中应用此逻辑，然后通过将其嵌套在主组件下将其包含到网页中。我认为在我连接逻辑时存在时间问题。我已经包括了所有相关的代码片段，如果还有什么我可以提供，以更好地帮助用户回答这个问题，请让我知道

哈克：我发现在System.import promise中包装角度组件逻辑会在连接按钮逻辑时引入适当的时间。不知道为什么：/。注意“Button component TypeScript”中的注释代码就是一个例子

定义了主组件的index.HTML中的HTML代码段

<!-- 1. Load libraries -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
            System.config({
            packages: {        
              src: {
                format: 'register',
                defaultExtension: 'js'
              }
            }
          });
          System.import("src/development/app/main-component.js")
                .then(null, console.error.bind(console));
        </script>

    </head>

    <body>

        <!-- main component -->
        <main>Loading...</main>
        <!-- end main component -->

        <!-- javascript -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>           
        <script type="text/javascript" src="src/development/js/main.js"></script>
        <!-- end javascript -->

    </body>

    </html>

主组件视图HMTL

<div id="main-container">

    <!-- floating action button -->
    <floating-action-button></floating-action-button>
    <!-- end floating action button -->

</div>

按钮组件HTML

<div class="to-top-button">
    <button id="to-top-button"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        <br>Top
    </button>
</div>

顶

如果您认为这是一个计时问题，请将调用包装在

setTimeout

中：

setTimeout(() => window.scrollTo(0, 0), 1);

如果这不起作用，请包装整个构造函数内容

我将尝试一下，这是处理此类问题的最佳实践吗？是的，这样可以给浏览器和Angular一些时间来完成挂起的异步工作。我可以确认此实现工作正常

setTimeout（（）=>{if（document.getElementById（“totop button”）！==null{document.getElementById(“到顶部按钮”）.addEventListener（“单击”，（）=>{window.scrollTo（0，0）；console.log（“单击”）；}}}，1）；

太好了！感谢您的反馈。

<div class="to-top-button">
    <button id="to-top-button"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        <br>Top
    </button>
</div>

setTimeout(() => window.scrollTo(0, 0), 1);