文章/答案/技术大牛

发布

社区首页 >问答首页 >制作角度为2的按钮组件，将用户带到网页的顶部。

问制作角度为2的按钮组件，将用户带到网页的顶部。
EN

Stack Overflow用户

提问于 2016-02-15 19:33:50

回答 1查看 2.7K关注 0票数 1

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

HACK:我发现在System.import承诺中包装角度组件逻辑会在连接按钮逻辑时引入适当的时间。但不知道为什么:/。请注意"Button组件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>

主组件TypeScript

import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

import {FloatingActionButtonComponent} from "./shared/floating-action-button/floating-action-button-component";

/**
 * Configuration for the main Angular Component
 * @Component 
 * @attribute {directives} defines a list of components, allowing angular to properly identify the component selector
 */
@Component({
    directives: [
        FloatingActionButtonComponent
        ],
    selector: "main",
    templateUrl: "./src/development/app/main-view.html"
})  

export class MainComponent { }

bootstrap(MainComponent);

主组件视图HMTL

<div id="main-container">

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

</div>

按钮组件TypeScript

import {Component} from "angular2/core";

@Component({
    selector: "floating-action-button",
    templateUrl: "./src/development/app/shared/floating-action-button/floating-action-button-view.html"
})

export class FloatingActionButtonComponent {

    constructor() {

        //System.import("path/to/a/directory/file.js").then(() => {
            if (document.getElementById("to-top-button") !== null) {
                document.getElementById("to-top-button").addEventListener("click", () => {
                    window.scrollTo(0, 0);
                    console.log("click");
                });
            }
        //});
    }
}

按钮组件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>

javascript

html

angularjs

angular

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-15 19:38:15

如果您认为这是时间问题，请将调用包装在setTimeout中。

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35417603

复制

相似问题

问制作角度为2的按钮组件，将用户带到网页的顶部。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作角度为2的按钮组件，将用户带到网页的顶部。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作角度为2的按钮组件，将用户带到网页的顶部。
EN