Question

我必须引导我的angular2组件，而不是将任何引导样式应用于html

这是我的组件login.ts

///<reference path="../../../node_modules/angular2/typings/node/node.d.ts" />

import {Component, View} from 'angular2/core';
import {FormBuilder,  FORM_DIRECTIVES } from 'angular2/common';
@Component({
  selector: 'login',    
})
@View({
  templateUrl: '/scripts/src/components/login/login.html',
  directives: [FORM_DIRECTIVES]
})

export class login {

}

这是我的登录模板：

<div class="col-lg-4 col-lg-offset-4">
    <div class="panel panel-default">
        <div class="panel-heading" ng-class="panel-heading">
            <h4>Login</h4>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label>User Name</label>
                <input type="text" class="form-control" placeholder="Please enter username"/>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="text" class="form-control"  placeholder="Please enter password"/>
            </div>
        </div>
        <div class="panel-footer text-left">
            <button class="btn btn-primary">Login</button>
        </div>
    </div>
</div>

export class login {

}

这是我的bootstrap.ts

//import {bootstrap} from 'angular2/angular2';
///<reference path="../node_modules/angular2/typings/node/node.d.ts" />
import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap} from 'angular2/platform/browser';
import {login} from './components/login/login';

bootstrap(login);

这是我的index.html

<!doctype HTML>
<html>

<head>

    <script src="/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/systemjs/dist/system.src.js"></script>
    <script src="/rxjs/bundles/Rx.js"></script>
    <script src="/angular2/bundles/angular2.dev.js"></script>
    <script src="/angular2/bundles/upgrade.dev.js"></script>
</head>

<body>
    <div class="container">
        <login>Loading......</login>
    </div>
    <script>
       System.config({
            defaultJSExtensions: true,
        packages: {        
          app: {
            defaultExtension: 'js'
          }
        },
        paths: {
            'angular2/upgrade': '../node_modules/angular2/upgrade'
          }

      });
        System.import('scripts/src/bootstrap');
    </script>
</body>

</html>

但是当我运行我的应用程序时，它会将输出作为

请帮助设置我的应用。

如果我必须使用材料设计，我需要做些什么改变

Answer 1

就像@Eric说的那样你已经注释了引导程序样式，并且在你编辑之后你根本就没有它们了。

不要对使用systemjs调用的bootstrap.js感到困惑，这是angular的引导程序方法，它包装了应用程序依赖项和配置以启动它。

只需添加所需的引导程序文件，就像您制作的任何其他网络应用程序一样。

1核心风格：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

2-如果需要，可以使用默认主题：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

3-如果您使用的是Bootstrap JS组件，而不仅仅是样式：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

只需在index.html的head标记内添加这些链接。

Answer 2

从getBootstrap.com下载引导程序并将引导程序文件夹添加到项目中是一个很好的做法，因为如果网络连接速度很慢，那么有可能cdn不起作用，并且您的主题可能不符合要求。

您可以从此处下载：http://getbootstrap.com/getting-started/

angular2不应用bootstrap类

2 个答案: