小编Dee*_*pak的帖子

我有一个Angular应用程序,我在assets文件夹下放置了一个图像和自定义字体(src/assets/images/bg.jpg和src/assets/fonts/segoeui.ttf).

我在scss文件中引用了bg.jpg和segoeui.ttf,如下所示:

styles.css的:

@font-face {
    font-family: "AppFont";
    src: url("/assets/fonts/segoeui.ttf");
}

@font-face {
    font-family: "AppFont";
    src: url("/assets/fonts/segoeuib.ttf");
    font-weight: bold;
}

html,
body {
    font-family: 'AppFont', Verdana, Geneva, Tahoma, sans-serif;
}

login.scss:

#login {
    background: url("/assets/images/bg.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
}

我也在使用延迟加载的模块.在开发模式下(当我运行服务时),一切都按预期工作.但是,当我发布prod build(ng build --prod)时,会创建一个包含所有js\css文件的dist文件夹.如果我将这些文件移动到服务器的虚拟目录中,则存储在资产中的图像和字体将指向服务器的根目录,而不是指向虚拟目录.例如,我有项目位于,myserver.com/myproject/index.html而这个应用程序寻找图像myserver.com/assets/bg.jpg,而不是myserver.com/myproject/assets/bg.jpg.自定义字体也有同样的问题.不管你有没有想过这个问题？如果是,请告诉我如何解决这个问题.

之前,甚至构建的js\css文件都是从根目录引用的,而不是从虚拟目录引用的.为了解决这个问题,我将index.html从更改<base href="/">为<base href="./">

版本细节:

@angular/cli: 1.0.1
node: 6.10.2
os: win32 x64
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: …

我正在尝试获得类似于此处所示的列表:http: //arunsfolio.com/wp-content/uploads/2015/04/list-petro.png

我不确定我是否遗漏了某些东西.

这是代码:

 <ion-row>

    <ion-col width-40>
        <h4>Esso</h4>
        <p>Ungrester - 54</p>
        <p>84859 - munch</p>
    </ion-col>
    <ion-col width-40>
        <div class="priceStyle">
            <div class="priceChild">
                $123
            </div>

        </div>
    </ion-col>
    <ion-col width-10>
       <div>
        12KM
      </div>
    </ion-col>
</ion-row>


SCSS:
.priceStyle {
        background-color: lightblue;
        display: flex;
        flex-direction: column;

        width: 100px; 
        height: 50px; 
        border-radius: 2px;


    }

.priceChild {
        font-weight: bold;
        font-size: 1.5em;
        color: white;
        margin: 0;
        flex: 1;
        justify-content: flex-end;
        align-items: flex-end;
    }

我的代码没有对齐中心的元素.

这就是它现在的显示方式:

感谢您的帮助.

谢谢.

如何在 Angular 的表格单元格中编写向上键和向下键的功能？（就像我们如何使用向上和向下箭头键在 Excel 工作表中的单元格中移动键一样）。

这是我的代码：http : //plnkr.co/edit/vk937A1VWNPIFQYkoPsM?p=preview

<table>
      <thead>
            <tr>
                 <th class="under-below" *ngFor="let col of columns">{{col.display}}</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let row of rows">
                <td *ngFor="let col of columns">

                <div *ngIf="!col.editable">{{colLabelFunction(row, col)}}</div>
                <input type="text" value="{{colLabelFunction(row, col)}}" *ngIf="col.editable">

                </td>

            </tr>


        </tbody>
      </table>

我想使用 keyup 和 keydown 键在“第 2 列”文本输入（单元格）上上下移动。

我想知道如何获取amcharts 4中单击的行项目的X \ Y项目详细信息。

我在这里有代码：https : //stackblitz.com/edit/angular-playground-3qpqlq

series2.segments.template.events.on("hit", (ev) => {
alert('line clicked');//this gets triggered
//but how to i get the line item details here, like X axis and Y axis 
//value of the clicked point of the line?

}, this); 

我有一个main router-outlet,用于显示登录屏幕(/login)和主要内容屏幕(登录后显示)(/main).

一旦用户在内容屏幕上,我想在顶部显示导航栏,有2个选项(例如,"概述","洞察").这个导航栏是OverviewComponent和InsightsComponent

在这个导航栏下面,我想显示另一个路由器插座,它将加载OverviewComponent或InsightsComponent根据用户在导航栏中点击的内容.如果我将'/ overview'和/'insights'作为路线,它将直接显示相应的组件,但不会显示导航栏.

以下是我当前的路由配置(这不对):

const appRoutes: Routes = [
  { path: 'main', component:  MainComponent},
  { path: 'overview', component:  OverviewComponent},
  { path: 'insights', component: InsightsComponent },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

如果我们能够在angular2 angular4中实现这一点,请告诉我.我正在使用以下版本:

"@angular/core": "^4.0.0"
"@angular/router": "^4.0.0"
"@angular/cli": "1.0.1"

******************尝试2 - 仍然没有工作******************

const appRoutes: Routes = [
  { path: 'main',
    children: …

我有以下角度代码：

comp.html

<select [(ngModel)]="selectedBanner" (change)="onBannerChange()">
                    <option *ngFor="let banner of banners" 
                    [ngValue]="banner">{{banner.BannerDesc}}</option>

                </select>

比较

    public banners: any[] = [
        {BannerId: 1, BannerDesc: 'AAAA'},
        {BannerId: 2, BannerDesc: 'BBBB'},
        {BannerId: 3, BannerDesc: 'CCCC'},
        {BannerId: 4, BannerDesc: 'DDDD'},
    ];
    public selectedBanner: any = {BannerId: 3, BannerDesc: 'CCCC'};
    onBannerChange() {
        console.log(this.selectedBanner);
    }

但是，在加载时，选择下拉列表始终为空白。只有当我改变时，它才会获得价值。如何在加载时设置默认值？

我正在使用角度 4.0.0