标签: angular7

在另一个组件中注入组件来访问注入组件中的函数或属性是否正确？
注意：这些组件都不是另一个组件的子组件

import { UsersComponent } from './../users/users.component';

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

  constructor(users:UsersComponent){
    users.getAllUsers()
  }
}

如何将此 javascript 和 HTML 代码添加到 Angular 项目中？ 我已将 func.js 放在我的 Angular 项目的 src 文件夹中以及我尝试导入和使用 ngAfterViewInit() 来加载和使用 javascript 函数的 app.component.ts 文件中

这些是我尝试添加到 Angular Web 应用程序中的 javascript 和 html 文件：

函数.js

const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
    questionnaire: 'Questionnaire',
    valueset: 'ValueSet'
}

//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var …

我在 Angular 7 应用程序中使用 ngb 模态，当模态打开时，当我执行特定操作时，我需要滚动到模态顶部。

例如，模态底部有一个按钮，一旦我点击这个按钮，我需要页面滚动到模态顶部，

我尝试使用

window.scrollTop = 0;

和

document.getElementsByClassName('custom-modal').scrollTop = 0;

和

document.getElementsByClassName('custom-modal').scrollTo({
  top: 0
})

但这些解决方案不起作用。

Angular 工作区允许我将多个项目添加到单一存储库中，这很棒。然而，在与多个团队合作时，我注意到，如果您只有一个 package.json 并且让每个团队使用他们正在编写的应用程序对其进行编辑，那么事情可能会变得非常混乱。

可以有这样的结构吗？

|\xe2\x94\x80\xe2\x94\x80 angular.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 e2e\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- I should only be responsible for everything in /src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 projects\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 my-sub-application\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- Is this possible? So that "my-sub-application" only pulls its dependencies from this package.json?\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 environments\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfills.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles.scss\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.app.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 …

我们正在努力将应用程序从角度6迁移到7,我们正在使用Ng-fullCalendar.

我们的package.json文件包含以下版本:

"fullcalendar": "3.6.1",
"ng-fullcalendar": "1.7.1"

在编译我们的项目时,我们收到以下错误:

ERROR in node_modules/@types/jquery/index.d.ts(6123,66): error TS2344: Type '"timeout" | "onreadystatechange" | "responseType" | "withCredentials" | "msCaching"' does not satisfy the constraint '"abort" | "open" | "timeout" | "response" | "getAllResponseHeaders" | "getResponseHeader" | "overrideMimeType" | "readyState" | "responseText" | "setRequestHeader" | "status" | ... 22 more ... | "dispatchEvent"'.
      Type '"msCaching"' is not assignable to type '"abort" | "open" | "timeout" | "response" | "getAllResponseHeaders" | "getResponseHeader" | "overrideMimeType" | "readyState" | "responseText" | …

我正在创建一个新的Angular 7应用，最近几天我一直在研究此问题，但是我无法找到此错误的解决方案“无法绑定到“ routerlink”，因为它不是“一种'”。以下是一些我看过的Angular2异常文章：无法绑定到“ routerLink”，因为它不是一个已知的本机属性，而“ 获取”则无法绑定到“ routerLink”，因为它不是“'一种'。尽管引用了路由器模块但仍为 “ no-go” ，但仍存在错误。

这是布局：

应用->导航这是代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UltiMaterialModule } from './ulti-material/ulti-material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { LayoutModule } from '@angular/cdk/layout';
import { NavigationModule } from './navigation/navigation.module';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({ …

这是我学习角度的第一天,我遇到了一条非常不直观的错误信息,其中说:

未捕获错误:模板解析错误:意外结束标记"p".当标签已被另一个标签关闭时,可能会发生这种情况.欲了解更多信息请参阅 https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags("数字{{I + 1}} {{} phoneNumber的} [错误 - >]

"):ng:///AppModule/AddressCardComponent.html@5:0

在有效的html模板上抛出错误,如下所示:

<p>Phones:</p>
<p *ngFor="let phoneNumber of user.phone; index as i">
  <h3>
      Number {{ i + 1 }}: {{ phoneNumber }}
  </h3>
</p>

在组件本身它看起来像这样:

@Component({
  selector: 'app-address-card',
  templateUrl: './address-card.component.html',
  styleUrls: ['./address-card.component.scss']
})
export class AddressCardComponent implements OnInit {

  user: any;

  constructor() {
    this.user = {
      name: 'Foo Bar',
      title: 'Software Developer',
      address: '1234 Main St., State, City 610010',
      phone: [
        '123-123-1234',
        '456-546-4574'
      ]
    }
  }

  ngOnInit() {
  }

} …

我想知道是否有办法根据环境配置angular.json文件的脚本部分.

我想在生产环境中包含一个特定的脚本(Myscript.js).

"scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/slick-carousel/slick/slick.min.js",
          "./src/assets/scripts/Myscript.js"
        ]

我没有在文档中找到任何关于此的内容.可能吗？

嵌套的对象显示为[object Object]，因此我试图通过管道和地图进行投射，但没有任何位置。我已经将模型作为类和接口进行了尝试，但没有帮助。有人可以告诉我我在做什么错吗？谢谢。

功能：

  getClients(customerId: number): Observable<Client[]> {
    let clientUrl = 'SOME_URL';
    return this.http.get<Client[]>(clientUrl)
      .pipe(map(client: Client) => client.address as Address);
  }

型号：

import { Address } from './address.model';

export class Client{
  id: number;
  name: string;
  accountNumber: string;
  addressId: number;
  phoneNumber: string;
  address: Address;
}


export class Address{
  id: number;
  name: string;
  addressLine1: string;
  addressLine2: string;
  city: string;
  postalCode: string;
}

我收到错误消息：错误TS2345（TS）类型“地址”的参数不能分配给类型“ OperatorFunction <{}，Client []>”的参数。

我想将JSON对象传递给另一个页面。我尝试过的是使用Angular路由器传递JSON字符串，ActivatedRoute如下所示：

this.router.navigate(['details', details]);

然后像这样检索它：

import { ActivatedRoute } from '@angular/router';


constructor(private activatedRoute: ActivatedRoute) { 
  }


ngOnInit() {

  this.activatedRoute.params.subscribe(extras => {
     console.log(extras);
     this.JSONObject = extras;
  });

}

可以这样做，但是嵌套的JSON对象变得无法访问。它变成了这个字符串：

"[object Object]"

字符串化的JSON对象很好，可以在我通过它之前进行访问。另一个问题是，它将JSON字符串附加到url，因此看起来不太好。从我的阅读中也可以看出，传递某种东西不仅仅是一种好id方法。

我在想类似在Android活动之间传递对象作为意图附加项的事情。我已经搜索了文档，论坛和以前的stackoverflow问题，但没有找到任何能使我实现这一目标的解决方案。使用Ionic4中的Angular路由器还有其他方法在页面之间传递对象吗？