小编Neh*_*hal的帖子

我有以下路线定义：

export const AppRoutes = RouterModule.forRoot([
{
    path: '',
    canActivate: [AuthGuardService],
    component: HomeComponent,
    children: [
        {
            path: 'child1',
            component: Child1Component
        },
    ]
},
]);

路由会child1从其父级继承 canActivate 防护吗？

我想为 md-tab 自定义活动颜色。

chrome dev 控制台中的类显示 ==> -mat-tab-label mat-ripple mat-tab-label-active。但没有任何边界底部。有一个我试图改变的人字形类，但没有效果。

我几乎在所有课程中都尝试过 /deep/。努力工作。还检查了 md-tab-header，但在任何地方都看不到那种颜色！任何帮助，将不胜感激 ：）

我正在使用Material 2来创建菜单.我有一个md按钮触发器打开一个md菜单.我希望按钮在悬停时打开.我知道Material Angular.io仍然很新.我已经用Google搜索了问题,但我想出了Angularjs的结果.谁能指出我正确的方向？

这是我的html示例:

    <button md-button [mdMenuTriggerFor]="userMenu" class="nav-btn" ><i class="fa fa-user" aria-hidden="true" id="user-icon"></i> NAME</button>
    <md-menu #userMenu="mdMenu" xPosition="before" yPosition="below" [overlapTrigger]="false">
        <button md-menu-item class="nav-dropdown" [routerLink]="['/dashboard']">DASHBOARD</button>
        <button md-menu-item class="nav-dropdown">MY PROFILE</button>
        <button md-menu-item class="nav-dropdown">lOGOUT</button>
    </md-menu>

我遇到了 md-card 组件的问题

        <md-card>
            <img height="200" width="200" md-card-image src="/resources/{{odd?.image?.path}}" />
            <md-card-content>
                <button md-button>{{odd?.object?.name}}</button>
            </md-card-content>
        </md-card>

我有这个代码，它创建了一张卡片，里面有一个图像，图像下面有一些文字。我希望图像的大小为 200x200 并且我希望卡片完全包裹图像，但相反的情况发生了，卡片填满了页面的整个宽度，因此，图像拉伸到卡片的大小

如果我从 img 标签中删除 md-card-image 属性，它会以 200x200 显示图像，但 md-card 仍然被拉伸。

我怎样才能保持我想要的图像大小并使 md-card 环绕它？

我对 angular 4 还很陌生，我正在尝试制作一个可以显示用户日志的网站。我的问题是如何从数据库中获取新数据并将其显示到我的角度页面而不刷新页面。我的朋友告诉我使用 ajax，是否有任何内置的 angular 解决方案可以解决我的问题？这是我在服务上的代码

import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import *  as _ from 'underscore';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';
import {tokenNotExpired} from 'angular2-jwt';


@Injectable()
export class PagerService {

    authToken:any;
  constructor(private http:Http) { }

  getzip(){
    //gets all the data that matches the users zipcode
        var headers = new Headers();
        this.loadToken();//access token
        headers.append('Authorization',this.authToken);
        headers.append('Content-type','application/json');
        return this.http.get('http://localhost:3000/logs/getByName',{headers:headers})
        .toPromise().then((res) => res.json());
    }


   loadToken(){

        var token = localStorage.getItem('id_token');
        this.authToken = token;
        //this.user = user;
    } …

我有一个md-dialog组件- DialogComponent我从同级组件中打开SiblingComponent--我想dialog.component.ts在执行某些操作后将其关闭 。

DialogComponent基本上是带有提交按钮的表单，提交表单使我能够dialog.component.ts执行我正在做的一些验证并将数据发送到服务的功能。

验证通过和数据发送后，我想作出一些超时，然后自动关闭拨号窗口，但我不知道该怎么办好像md-dialog-close在dialog.component.ts

我使用角度为2的材料设计.我想在我的应用程序中使用材质设计分页器,并在组件中获取当前选定的页面索引.paginator插件没有太多文档.这是材料分页器页面:https://material.angular.io/components/paginator/overview

HTML代码

<md-paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>

角2代码

@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
})
export class PaginatorOverviewExample {
   //I want to get page change event here
}

我正在尝试使用有角材料的小吃栏，但遇到了一个问题 - 小吃栏没有出现在屏幕的按钮上，而是出现在需要它的按钮下方。发生的另一件事是，它还将小吃店中的文本放在我的页面上。

这是我使用的代码：

Snackbar.ts

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

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

  constructor(public snackBar: MdSnackBar) {}

  ngOnInit() {
  }

  openSnackBar() {
    this.snackBar.open("Hello World","action",{duration: 500});
  }
}

Snackbar.html

<button md-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Click me
</button>

应用程序组件.ts

import { Component } from '@angular/core';
import { SnackBarComponent } from './components/snack-bar/snack-bar.component';

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

我想隐藏Angular Material Tabs的标题(按钮),因为我使用自定义导航按钮在标签之间切换. https://material.angular.io/components/tabs/overview

但是,无法使用css隐藏标头.我不知道为什么.md-tab-group是一个角度指令,用标签模板替换.尽管它通常以这种方式大喊大叫...

HTML:

     <div class="tabs">
        <md-tab-group>
           <md-tab label="Tab 1">Content 1</md-tab>
           <md-tab label="Tab 2">Content 2</md-tab>
        </md-tab-group>
     </div>

CSS:

     .tabs md-tab-header, .tabs .mat-tab-header {
        display: none;
     }

我有一个 angular 4 材质表格单元格中的按钮，我只想在悬停在表格行上时出现：

<md-cell *cdkCellDef="let row" contenteditable='false' > 
        <div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
            <button md-icon-button><md-icon (click)="row.editorEnabled=true;" mdTooltip="Edit">mode_edit</md-icon></button>
          </div>
</md-cell>

我如何实现这一目标？

更新：整个代码：

<md-cell *cdkCellDef="let row" contenteditable='false' > 
        <div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
            <button md-icon-button><md-icon (click)="row.editorEnabled=true;" class="editButton" mdTooltip="Edit">mode_edit</md-icon></button>
          </div>
        <div *ngIf="row.editorEnabled" >
          <md-input-container><input mdInput [(ngModel)]="row.goalStatusName" #goalName></md-input-container>
            <button md-icon-button>
              <md-icon (click)="modifyGoal(row.goalStatusId,row.goalStatusName)" mdTooltip="Save" style="color:green;font:bold;" >done</md-icon>
            </button>
            <button md-icon-button>
              <md-icon (click)="row.editorEnabled=false" mdTooltip="Cancel" style="color:red;font:bold;" >clear</md-icon>
            </button>
          </div>
    </md-cell>