我想在一个句子中设置一个单词,使其具有md-primary颜色,另一个单词设置为具有强调颜色.我假设这样的事情:
<div>
Hello <span class="md-primary">friend</span>.
How are <span class="md-accent">you</span>?
</div>
Run Code Online (Sandbox Code Playgroud)
但这些类仅适用于某些指定的组件.
这样做的方法是什么?
Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
我想改变angular2材质对话框的外观和感觉.例如,要更改弹出容器的固定大小并使其可滚动,请更改背景颜色,以此类推.最好的方法是什么?有没有我可以玩的CSS?
我有这个案子:
http://codepen.io/anon/pen/radoPd?editors=110
这是CSS代码:
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
overflow-y: scroll;
}
Run Code Online (Sandbox Code Playgroud)
出于某种原因,在IE11上,.sidebar和.main区域都不会填充包装器的整个高度.
这是浏览器之间的不一致.这是一个错误吗?我错过了什么吗?
我在我的项目中使用react和material-ui,我遇到了一个我不知道如何解决的简单问题.我想创建一个抽屉并设置它的高度,当它打开时,它不会打开应用程序栏.
Drawer组件中没有高度参数,我也尝试覆盖它的样式并在样式对象上设置高度,如下所示:
<Drawer style={{height:'90%'}} />
Run Code Online (Sandbox Code Playgroud)
但它没有用.
我能想到的唯一方法是编辑抽屉组件的代码,但当然我想避免这种情况.
关于如何定义高度的任何想法?
我试图在用户注册后显示警报.我已经尝试过调试并且明白它总是会出现错误功能(当用户注册成功并且用户已经存在时).
以下是我的代码.我无法理解为什么总是会出错.任何帮助都表示赞赏,因为我长期坚持这一点.提前致谢.
1)警报组件
import { AlertService } from './../../shared/services/alert.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.css']
})
export class AlertComponent {
private _alertService;
private message: any;
constructor(alertService: AlertService) {
this._alertService = alertService;
}
ngOnInit() {
this._alertService.getMessage().subscribe(message => { this.message = message; });
}
}
Run Code Online (Sandbox Code Playgroud)
2.Alert模板
<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
'alert-danger': message.type === 'error' }">{{message.text}}</div>
Run Code Online (Sandbox Code Playgroud)
3)注册模板
<div class="container">
<h2>Register</h2>
<form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
<div class="form-group" [ngClass]="{ …Run Code Online (Sandbox Code Playgroud) 嗨,我正在尝试构建Angular 4应用程序,接下来的步骤如下 -
建立 ng build
在我的amazon ec2实例中,我运行的是apache.遵循的步骤 -
#!/bin/bash
yum install httpd -y
yum update -y
cp dist/* /var/www/html/
service httpd start
chkconfig httpd on
Run Code Online (Sandbox Code Playgroud)
一切正常,但我的应用程序auth0用于身份验证,我看到他们回调http://ip/callback
我的申请表 - 404未找到.
我尝试建立像ng build --base-href .,它没有工作!
Please help me how to build this one, please note that when I use在我当地的服务`一切都很棒.但当我尝试部署到生产时,它给出了这个错误.我非常确定在构建应用程序时我正在做的事情.
我试过nginxdocker容器,它给出了同样的错误.我的docker文件看起来像这样.
FROM nginx
COPY dist /usr/share/nginx/html
上面的docker文件有什么问题吗?
https://github.com/auth0-samples/auth0-angular-samples/tree/master/01-Login - 示例应用代码
https://manage.auth0.com/#/logs - 日志中没有错误,这意味着auth0工作正常,但我的角色出现构建错误. …
我有一个带输入字段的$ mdDialog.在关闭$ mdDialog之前,将保存输入字段的内容.因此,当用户按下"关闭"按钮时,将调用一个函数对数据执行某些操作并保存它们.但是,我无法在ESC上检测到$ mdDialog的关闭.是否可以在$ mdDialog控制器中使用ESC检测关闭事件?
这是示例代码. Codepen链接
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function($scope, $mdDialog, $rootScope) {
//$rootScope is used only of this demo
$rootScope.draft = ' ';
$scope.showDialog = function(ev) {
var msgDialog = $mdDialog.show({
controller: 'DemoDialogCtrl',
template: "<md-input-container><label>Text</label><input type='text' ng-model='myText' placeholder='Write text here.'></md-input-container><md-button ng-click='close()'>Close</md-button>",
})
};
});
(function() {
angular
.module('MyApp')
.controller('DemoDialogCtrl', DemoDialogCtrl);
DemoDialogCtrl.$inject = ['$scope', '$rootScope', '$mdDialog'];
function DemoDialogCtrl($scope, $rootScope, $mdDialog) {
$scope.close = function() {
//$rootScope is used only of this demo
// In real code, there are some …Run Code Online (Sandbox Code Playgroud)我打算使用离子本机存储来存储一些翻译历史记录,只要有翻译的单词.翻译操作(日期,翻译单词)将存储在离子本机存储中,当我打开历史页面时,将显示翻译历史列表.
这是我从离子官方网站获得的最基本的代码:
export class HomePage {
DataArray: Array<string> = [];
constructor(public navCtrl: NavController, private storage: Storage) {
}
// set a key/value
setData(){
this.storage.set('age', 'Max');
}
// Or to get a key/value pair
getData(){
this.storage.get('age').then((val) => {
console.log('Your age is', val);
});
}
}
Run Code Online (Sandbox Code Playgroud) 我对具有相同组件路径的动画有疑问。例如。我有这条路线:
{路径:'产品/类别/:类别',组件:CategoryComponent},
首先,我解决了路由参数的问题,因为当我在同一组件之间导航时,它们不会刷新 ngOnit() 函数。但现在我已经向我的应用程序添加了动画,并且如果我从 HomeComponent 转到 CategoryComponent,效果会很完美。但是,如果我使用不同的参数从 CategoryComponent 转到 CategoryComponent ,则动画将不起作用。
这是我的动画文件:
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.5s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
]);
Run Code Online (Sandbox Code Playgroud)
这是我的 CategoryComponent.ts
import { Component, OnInit, EventEmitter,Input, Output,HostBinding} from '@angular/core';
import { Pipe, PipeTransform …Run Code Online (Sandbox Code Playgroud) Pascal Precht 写了一篇关于 Angular 变化检测的精彩文章。虽然我知道 zone.js 和虚拟 DOM 是完全不同的概念,但 Angular 的 zone.js 相当于 React 的虚拟 DOM 吗?如果是,主要区别是什么,如果否,请简要说明原因。
angular ×6
css ×3
reactjs ×2
angular-cli ×1
angularjs ×1
auth0 ×1
css3 ×1
flexbox ×1
ionic-native ×1
javascript ×1
material-ui ×1
nginx ×1
virtual-dom ×1
zone.js ×1