如何在 Angular 中设置我自己的 CSS 和 HTML答案

【问题标题】：How to set up my own CSS and HTML in Angular如何在 Angular 中设置我自己的 CSS 和 HTML
【发布时间】：2017-04-08 16:35:18
【问题描述】：

我已经创建了一个这样的 login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector:'',
    templateUrl:'./html/login.html',
    styleUrls:['./resources/css/reset.css','./resources/css/style.css','./resources/css/invalid.css']
})

export class LoginComponent{
    constructor(){
        this.loginImagePath = './app/resources/images/';
    }
    OnInit(){

    }
}

这是我的 app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {  }

这是我的 login.html

    <body id="login">

        <div id="login-wrapper" class="png_bg">
            <div id="login-top">

                <h1>Simpla Admin</h1>
                <!-- Logo (221px width) -->
                <img id="logo" [src]="loginImagePath +'logo.png'" alt="Simpla Admin logo" />
            </div> <!-- End #logn-top -->

            <div id="login-content">

                <form action="index.html">

                    <div class="notification information png_bg">
                        <div>
                            Just click "Sign In". No password needed.
                        </div>
                    </div>

                    <p>
                        <label>Username</label>
                        <input class="text-input" type="text" />
                    </p>
                    <div class="clear"></div>
                    <p>
                        <label>Password</label>
                        <input class="text-input" type="password" />
                    </p>
                    <div class="clear"></div>
                    <p id="remember-password">
                        <input type="checkbox" />Remember me
                    </p>
                    <div class="clear"></div>
                    <p>
                        <input class="button" type="submit" value="Sign In" />
                    </p>

                </form>
            </div> <!-- End #login-content -->

        </div> <!-- End #login-wrapper -->

  </body>

但是视图应该是这样的

我做错了什么？

【问题讨论】：

标签： html css angular angular2-routing angular2-template

【解决方案1】：

这将使您的底部扩展以填满整个屏幕：

.png_bg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.png_bg > * {
  flex-grow:0;
}
#login-content {
  flex-grow: 1;
}

如果您打算将此布局重新用于其他页面，您可能会考虑为顶部和底部部分使用一些类，并调整您的选择器以匹配它们。假设您将在它们上放置 .top_bg 和 .body_bg，您可能希望将其放置到您应用的 .scss 中：

.png_bg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .top_bg {
    flex-grow: 0;
    /* might consider adding a `min-height` to it, too */
  }
  .body_bg {
    flex-grow: 1;
  }
}

【讨论】：

感谢您的回复。但是您是否注意到，我得到了两个带有布局页面的正文标签，将在每个页面中使用，另一个是带有 id="login" 的登录页面正文标签。但是当我从布局页面中删除body标签时，angular会自动渲染body标签。我有点困惑。
awesomescreenshot.com/image/2378982/… 这是在编辑你的 CSS 之后发生的
我在您链接的@Pradiptadas 中找不到任何对我的 CSS 的引用。你上面链接的布局完全搞砸了。主要是因为tutorial.css。您将元素硬编码为4600px 的宽度。你对这样的规则有什么期待？如果你同时修改它，这就是为什么你应该为你的问题创建一个minimal reproducible example。在我看来，无论是你还是你团队中的某个人在掌握 CSS 的基础知识方面都存在重大问题。如果您希望您的项目能够很快投入生产，则需要停止或加快它们的速度。
@Pradiptadas，你可以看看我的scssworking here。如果您想为您的案例提供解决方案，您需要在此处以 sn-p 复制您的案例。例如，提供一个重现您的布局并链接影响它的所有资源的示例。
所有网络都是HTML + CSS + JS。 Angular2 解析您在 scss 文件中提供的任何内容。我使用 Angular2。您应该检查tutorial.scss 的内容，这是大部分问题所在。