我是有角度的新手， 我有一个新的角度4应用程序，然后我一步一步地在https://material.angular.io/guide/getting-started安装它。
然后我从这里将代码复制到我的新组件： https://material.angular.io/components/input/examples
我看到了：
而非预期：
https://material.angular.io/components/input/examples
任何想法我做错了什么？或者检查什么来验证它？
的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';
}
答案 0 :(得分：0)
因为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';