Question

我是有角度的新手，我有一个新的角度4应用程序，然后我一步一步地在https://material.angular.io/guide/getting-started安装它。

然后我从这里将代码复制到我的新组件： https://material.angular.io/components/input/examples

我看到了：

https://ibb.co/ihb41G

而非预期：

https://material.angular.io/components/input/examples

https://ibb.co/bBA8Tw

任何想法我做错了什么？或者检查什么来验证它？

的src /应用/组件/ inputform / inputform.component.html：

Public Function GenerateNext(SourceFile As Variant, SourceSheet As String, SourceRange As String)

    Dim rsCon As Object
    Dim rsData As Object
    Dim szConnect As String
    Dim szSQL As String

    szSQL = "UPDATE [" & SourceSheet$ & "$] SET [First] = NULL ;"

     On Error GoTo SomethingWrong
    Application.StatusBar = "Retrieving data ....."


    szConnect = "Provider=Microsoft.Jet.OLEDB.4.0;" & _
                "Data Source=" & SourceFile & ";" & _
                "Extended Properties=Excel 8.0;"


    Set rsCon = CreateObject("ADODB.Connection")
    Set rsData = CreateObject("ADODB.Recordset")

    rsCon.Open szConnect
    'Run the query as adCmdText
    rsData.Open szSQL, rsCon, 0, 1, 1

    Exit Function

SomethingWrong:
    MsgBox "Something Wrong"
    On Error GoTo 0

End Function

的src /应用/组件/ inputform / inputform.component.css：

<form class="example-form">
  <md-form-field class="example-full-width">
    <input mdInput placeholder="Company (disabled)" disabled value="Google">
  </md-form-field>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="First name">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="Long Last Name That Will Be Truncated">
    </md-form-field></td>
  </tr></table>

  <p>
    <md-form-field class="example-full-width">
      <textarea mdInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
    </md-form-field>
    <md-form-field class="example-full-width">
      <textarea mdInput placeholder="Address 2"></textarea>
    </md-form-field>
  </p>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="City">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="State">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
      <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
    </md-form-field></td>
  </tr></table>
</form>

的src /应用/组件/ inputform / inputform.component.ts：

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

正在运行：

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

@Component({
  selector: 'app-inputform',
  templateUrl: './inputform.component.html',
  styleUrls: ['./inputform.component.css']
})
export class InputformComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

其他档案：

的src /应用程序/ app.module.ts

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

SRC / index.html中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

import { AppComponent } from './app.component';
import { InputformComponent } from './components/inputform/inputform.component';

@NgModule({
  declarations: [
    AppComponent,
    InputformComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdButtonModule, MdCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

的src / styles.css的：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Quickwebsite</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

的src /应用/ app.component.html：

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

的src /应用/ app.component.ts：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <app-inputform></app-inputform>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

的src /应用程序/ app.module.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Answer 1

因为https://material.angular.io/guide/theming形式似乎缺少这个：

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

创建文件夹theme并将应用主题放入文件yourthemename.scss

将其导入styles.scss，如@import '/app/theme/yourthemename';

跟着有角度的材料一步一步，但形式看起来不是材料，为什么？

1 个答案: